一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间）
另外一种是根据滑块的位置进行图片的预加载，在用户不察觉的情况下，实现瀑布流的加载效果
主要思路：
HTML结构很简单，就是一个div.picList包裹了所有img，然后加上一个简单的进度条div#loadBar
<div id="loadBar">
<div id="loadBarMask">
/*加载失败时<a href="https://www.f2er.com/tag/xianshi/" target="_blank" class="keywords">显示</a>灰底<a href="https://www.f2er.com/tag/wenzi/" target="_blank" class="keywords">文字</a>*/
&:after{
content: "( ⊙ o ⊙ )加载失败";
font-size: 6px;
font-family: FontAwesome;
color: rgb(100,100,100);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ddd;
}
}
}
.lazy{
background: url(../pic/loading.gif) center no-repeat;
border: 1px solid black;
}
width: 200px;
height: 15px;
background: linear-gradient(90deg,#187103,#81b50b,#187103);
border: 10px solid white;
position: absolute;
top: 150px;
left: 50%;
margin-left: -100px;
width: 70%;//这个数值<a href="https://www.f2er.com/tag/xianshi/" target="_blank" class="keywords">显示</a>没有加载成功的<a href="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a>
height: 100%;
background-color: beige;
position: absolute;
right: 0;}
}
css里面需要注意的地方有两个：
js部分（直接执行loadPicPerSecond()即可）
/每秒加载一张图片/
function loadPicPerSecond(){
lazyPic.each(function(index){
var self = $(this);
//console.log(self[0].complete);
/*<a href="https://www.f2er.com/tag/imgbiaoqian/" target="_blank" class="keywords">img标签</a>已经事先写在html中，所以此时的complete状态全部都是true*/
setTimeout(function(){
src[index] = self.attr('data-src');
self.attr('src',src[index]);
self.removeClass('lazy');
//<a href="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a>获得正确src地址之后，可以执行下面的onload操作
self[0].onload = function(){
//加载读条loadBar动画
countPic();
}
//<a href="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a>获得的src地址不正确时，执行下面的onerror操作
self[0].onerror = function(){
/*this.style.background = 'url(pic/compressed/picList18.jpg) center no-repeat';*/
countPic();
}
},1000*index);})
}
/根据onload的执行情况来计算当前的图片加载进度.每onload一次，activePic就增加1/
function countPic(){
activePic++;
var leftPic = totalPic - activePic;
var percentPic = Math.ceil(leftPic/totalPic*100);//没有加载的图片百分比，和loadBarMask的宽度占比配合
console.log("已加载"+(100-percentPic)+"%");
loadBarMask.css("width",percentPic+"%");
if(percentPic==0){
$('#loadBar').hide();
}
}
主要思路：
HTML和前面部分相同，只是把src写成正常地址即可。css完全一样。
js部分
var threshold = 200; //最后一张图片距离窗口200px的时候开始加载图片
var src = [];
var activePic = 0;
var totalPic = lazyPic.length;
//待加载的图片数据
var dirtSrc = "pic/compressed/picList";
var picData = {imgSrc:[
dirtSrc + "20.jpg",dirtSrc + "21.jpg",dirtSrc + "22.jpg",dirtSrc + "23.jpg",dirtSrc + "24.jpg",dirtSrc + "25.jpg",dirtSrc + "26.jpg",dirtSrc + "27.jpg",dirtSrc + "28.jpg",dirtSrc + "29.jpg",dirtSrc + "30.jpg",dirtSrc + "31.jpg",dirtSrc + "32.jpg",dirtSrc + "33.jpg",dirtSrc + "34.jpg",dirtSrc + "35.jpg",dirtSrc + "36.jpg",dirtSrc + "37.jpg",dirtSrc + "38.jpg",dirtSrc + "39.jpg",dirtSrc + "40.jpg",dirtSrc + "41.jpg",dirtSrc + "42.jpg",dirtSrc + "43.jpg",dirtSrc + "44.jpg",dirtSrc + "45.jpg",dirtSrc + "46.jpg",dirtSrc + "47.jpg",dirtSrc + "48.jpg",dirtSrc + "49.jpg",]};
//加载次数计数器
var scrollIndex = 0;
$(function(){
/监听窗口滚动情况/
$(window).on('scroll',function(){
scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
clientHeight = $(window).height();
scrollHeight = picList.last().height();//picList.last()[0].clientHeight
/*目标与窗口的距离达到阈值时开始加载*/
if(scrollHeight-clientHeight-scrollTop < threshold){
scrollPic(10);
}})
})
/根据滚动程度加载图片，每次加载perAmount张/
function scrollPic(perAmount = 10){
var totalAmount = perAmount * (scrollIndex+1);
//考虑到最后一次加载的时候，剩余的图片数量有可能达不到限定的每次加载的数量，这时候需要更改totalAmount的值
if(totalAmount>picData.imgSrc.length){
totalAmount = picData.imgSrc.length;
}
for(scrollIndex;scrollIndex<totalAmount;scrollIndex++){
var oimg = new Image();
oimg.src = picData.imgSrc[scrollIndex];
picList.append(oimg);
}
}
比较捉急的就是scrollTop、height那几个值的取值对象，总是记不清楚，所以按照js和jquery都写上了，以后可以直接用。将数值关系搞定之后，只要满足条件就触发加载即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。