另外一种是根据滑块的位置进行图片的预加载，在用户不察觉的情况下，实现瀑布流的加载效果
一 延迟加载
主要思路：
HTML的img标签中，将正确的地址存在data-src属性中，给所有图片设置一个转圈圈的loading图片作为background
js中，依次读取每一个img，将data-src中的地址替换到src中，去掉background
每成功加载一张图片，进度条的百分比进行相应的变化。
如果加载不成功，就提示图片加载错误。
HTML结构很简单，就是一个div.picList包裹了所有img，然后加上一个简单的进度条div#loadBar
<body> <div class="picList"> <img class="lazy" data-src=http://www.jsgho.com/help/fwq/"pic/compressed/picList1.jg"> <img class="lazy" data-src="http://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.jsgho.com/help/fwq/"pic/compressed/picList2.jpg""> <img class="lazy" data-src="http://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.jsgho.com/help/fwq/"pic/compressed/picList3.jpg""> <img class="lazy" data-src="http://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.jsgho.com/help/fwq/"pic/compressed/picList4.jpg""> <img class="lazy" data-src="http://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.jsgho.com/help/fwq/"pic/compressed/picList5.jpg""> <img class="lazy" data-src="http://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.jsgho.com/help/fwq/"pic/compressed/picList6.jpg""> <img class="lazy" data-src="http://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.jsgho.com/help/fwq/"pic/compressed/picList7.jpg""> <img class="lazy" data-src="http://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.jsgho.com/help/fwq/"pic/compressed/picList8.jpg""> <img class="lazy" data-src="http://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.jsgho.com/help/fwq/"pic/compressed/picList9.jpg""> <img class="lazy" data-src="http://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.jsgho.com/help/fwq/"pic/compressed/picList10.jpg""> </div> <div id="loadBar"> <div id="loadBarMask"></div> </div> </body>
css（使用的scss，编译时会自动加上各种兼容前缀）
.picList{ img{ width: 100px; height: 100px; position: relative; &: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(http://www.jsgho.com/help/pic/loading.gif) center no-repeat; border: 1px solid black; } #loadBar{ width: 200px; height: 15px; background: linear-gradient(90deg,#187103,#81b50b,#187103); border: 10px solid white; position: absolute; top: 150px; left: 50%; margin-left: -100px; #loadBarMask{ width: 70%;//这个数值显示没有加载成功的图片 height: 100%; background-color: beige; position: absolute; right: 0; } }
css里面需要注意的地方有两个：
一个是把图片加载错误时显示的灰底文字放在了img的after伪类中，当图片加载失败，又去掉了background的gif图片之后，就会显示这个部分的内容及样式。
一个是进度条的样式。写得很简单，主要是一层带渐变的绿色和一层白色叠在一起。绿色表示已加载，白色表示未加载。显示的时候，直接控制白色那层的宽度即可。
js部分（直接执行loadPicPerSecond()即可）
var lazyPic=$('img.lazy'); var loadBarMask=$('#loadBarMask'); var picList=$('.picList'); var activePic=0; var totalPic=lazyPic.length; function loadPicPerSecond(){ lazyPic.each(function(index){ var self=$(this); //console.log(self[0].complete); setTimeout(function(){ src[index]=self.attr('data-src'); self.attr('src',src[index]); self.removeClass('lazy'); //图片获得正确src地址之后，可以执行下面的onload操作 self[0].onload=function(){ //加载读条loadBar动画 countPic(); } //图片获得的src地址不正确时，执行下面的onerror操作 self[0].onerror=function(){ countPic(); } },1000*index); }) } 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(); } }
二 瀑布流加载
主要思路：
监听窗口滚动情况，当已经加载的图片的最后一张快要进入窗口的时候，开始加载下面的图片。
假设所有的图片地址已经存在一个json数据中，每次读取10张图片地址，加载它们之后，插入到现有的瀑布流末尾。
如此往复，直到加载完所有图片。
HTML和前面部分相同，只是把src写成正常地址即可。css完全一样。
js部分
