图片懒加载在多图业务项目开发中，已经快被用烂了，前两天出去面试的朋友发我一条消息，面试官问到滚动图片懒加载原理，他一脸懵逼，平时只会用，没有深入研究这东西，这回吃亏了。
现在写下这个，是为了警醒自己，对待知识，不要只会皮毛，不要将就。
首先，就是html，(css就省略了）
//html
<ul>
<li>
<img class='lazyLoad_img' src="" alt="" data-src='//upload.jianshu.io/users/upload_avatars/5710540/21375345-6956-4793-b0a3-c074431422e4.png' />
</li>
<li>
<img class='lazyLoad_img' src="" alt="" data-src='//upload.jianshu.io/users/upload_avatars/5710540/21375345-6956-4793-b0a3-c074431422e4.png' />
</li>
<li>
<img class='lazyLoad_img' src="" alt="" data-src='//upload.jianshu.io/users/upload_avatars/5710540/21375345-6956-4793-b0a3-c074431422e4.png' />
</li>
<li>
<img class='lazyLoad_img' src="" alt="" data-src='//upload.jianshu.io/users/upload_avatars/5710540/21375345-6956-4793-b0a3-c074431422e4.png' />
</li>
</ul>
首先看html结构，注意我并没有在img标签上直接写入src值，而是让动态加载（实际项目图片链接会动态加载）的图片地址放在data-src上。
//js
;(function(){
let [imgList,delay,time] = [[],null,200];
//滚动执行的入口函数
var throttleLoad = ()=>{
clearTimeout(delay);
//函数节流:避免高频事件导致浏览器掉帧，优化加载性能，提升用户体验，降低服务器压力（存在请求的情况下）
delay = setTimeout(()=>{
loadImg();
},time)
}
//判断图片是否显示在可视区域
var isShow = (element)=>{
//getBoundingClientRect()用于获取元素相对于视口的位置，用top,right,bottom,left表示，元素的这个四个属性都是相对于视口的left和top来说的。
let base = element.getBoundingClientRect();
return (base.left && base.left >=0 && base.top && base.top >= 0) <= (document.clientHeight || window.innerHeight);
}
//加载图片
var loadImg = ()=>{
for(let i = 0,len = imgList.length;i<len;i++){
if(isShow(imgList[i])){
//使用getAttribute()也可以
imgList[i].src = imgList[i].dataset.src;
//删除已经加载的图片元素，避免重复查询，提高性能
imgList.splice(i,1);
}
}
}
var init = (selector)=>{
selector = selector || '.lazyLoad_img';
let nodes = document.querySelectorAll(selector);
//将nodeList转换成数据类型array
imgList = Array.apply(null,nodes);
window.addEventListener('scroll',throttleLoad,false)
}
init('.lazyLoad_img');
})();
相关技术点放在注释里了，如果有不清楚的地，请Google。
这里还有一点要说明的是，imgList里面放的所有需要懒加载的图片集合，数据类型是复杂数据类型，会被存储在堆内存中，而栈内存中只保留了访问所在堆内存地址的指针，当浏览器要加载的时候，会首先找到放在栈内存中的指针，然后根据这个指针再访问实体数据。所以这里面涉及到内存的操作，建议尽可能的优化加载逻辑降低内存使用率，提高加载效率。
