前言：
当自己开发的网页图片过多，或者网页中存在视频、音频等大文件时，当用户打开网页，但是由于文件过大，用户的网络不是很好的时候，就会导致页面上本该显示的文件位置却留出了一片空白，如果而且在用户浏览页面的时候还会不断的加载导致页面变得卡顿。有些网站刚刚进入的时候会显示加载图标，等待浏览的页面需要的大文件加载完毕后才进入页面，这时候，大文件已经在用户的浏览器中缓存下来了，之后用户浏览该网页时就不会从服务器上重新加载所需要的大型文件，而是直接从浏览器的缓存中取出需要的文件，这样会大大提高用户的体验度以及减少对服务器的压力。
下面放一个极其简陋的案例，好看的自己去设置，
html中要应用Jq包
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>css:
css:<style type="text/css">*{padding:0px;margin: 0px;}#loading{width: 100%;height: 100%;z-index:999;position:fixed;top:0;left: 0;background:#fff;}#loading #loadingItem{width:65px;height:65px;margin: 250px auto;}#loading #loadingItem span{display:block;padding:5px 0px ;margin:5px auto;border:1px solid;text-align: center;}</style>
html:
<div id="loading"><div id="loadingItem"><img alt="" height="150" src="39.gif" width="150"/><!--这个39.gif 是放在项目的加载图标也就是文章开头的那个gif图--><span>0%</span><!--这是显示加载进度的百分比--></div></div><img src=' ' /><!--注意：这里自己去网上找图片，填上图片的链接地址，不要把图片下载了放到项目里面，图片越多效果越明显-->
JQ：
$(document).ready(function() {var img = $("img"); //获取全部的图片,将所有的图片当成数组// console.log(img.length);//这个是打印数组的长度，也就是图片的数量var num=0; //这个是图片加载进度img.each(function(index) { //循环遍历所有的图片var oImg = new Image(); //实例化图片对象oImg.src = img[index].src;//获取到图片的连接地址oImg.οnlοad=function(){num++;//加载进度+1$("#loadingItem span").html(parseInt(num/img.length*100)+'%');//进度除所有的图片的总数*100等于加载百分比// console.log(parseInt(num/img.length*100)+'%');//打印出百分比if(num>=index){ //如果当前加载的进度大于等于最后的索引时，结束加载，将加载的动画隐藏。$("#loading").fadeOut();}}});});
版权声明：本站部分内容由互联网用户自发贡献，文章观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请拨打网站电话或发送邮件至1330763388@qq.com 反馈举报，一经查实，本站将立刻删除。
文章标题：jq网页预加载、懒加载技术发布于2024-01-16 22:33:33
