图片一直是网络资源占用大户，对于一个前端有几百张图片的网站来说，如果首屏即加载所有图片（无论这些图片有没有被用户看到），那无疑是既浪费网络资源，又伤害用户体验的事。因此，图片懒加载，是提高前端性能的刚需所在。目前，淘宝网、知乎等大流量网站都已经使用了图片滚动懒加载的方案——仅当图片滚入视窗，被用户看到的时候，才会去真正加载。
基本原理
图片滚动懒加载的原理非常简单：基于<img>标签，在初次加载时，不把图片url放在src属性中，而是自定义一个属性，例如data-src。然后检测"scroll"，"resize"等窗体事件，判断图片是否进入了可视范围。如果进入，则将data-src的字段替换到src，此时浏览器会自动去加载对应图片资源。
Talking is cheap, show you the code
首先是不添加src的img标签，新增data-src用于放置图片url：
img class="lazyImg" data-src="xxx" //即为一个正常的img标签（简书写img标签会出问题）
然后，我们需要新增一个数组队列，来储存所有未加载的img节点：
var lazyImg=[].slice.call(document.querySelectorAll(".lazyImg"));
为了方便，这里直接用querySelectorAll来获取所有img节点。注意因为NodeList是只读数组，因此需要将其转化为数组，方便之后的增删。在真实环境中，还需给每个成员添加其最近的可滚动祖先节点的引用，即el.parentNode。
最关键的部分来了，如何判断图片是否进入了可视区域，以及实现加载呢？
function loadImage(images){
let scrollParent,src,el;
for(let i = 0;i < images.length;i++){
scrollParent=images[i].scrollParent; //img所属的最近的可滚动祖先节点
el=images[i].el; //offset为预留的预加载距离
if(checkInView(el,scrollParent,this.options.offset)){
src=el.dataset.src;
el.setAttribute("src",src);
images.splice(i--,1); //将该img元素移除
}
}
}
上面提到的scrollParent是带有scroll特性的祖先节点，具体实现：可使用getComputedStyle检查父节点是否设置了overflow(overflow-x,overflow-y)为"auto"或"scroll"，不断循环直到找到满足条件的祖先节点。
下面封装了判断是否在可视区域的函数：
const checkInView=(el,scrollParent,offset)=>{
let scrollTop,clientH,clientW,scrollLeft;
let offsetTop=0,offsetLeft=0;
if(scrollParent === window) {
scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
clientH=document.documentElement.clientHeight||document.body.clientHeight;
clientW=document.documentElement.clientWidth||document.body.clientWidth;
}
else {
scrollTop = scrollParent.scrollTop;
scrollLeft=scrollParent.scrollLeft;
clientH = scrollParent.clientHeight;
clientW=scrollParent.clientWidth;
}
while(el!=scrollParent && el!=null){
let borderWidth=parseInt(getStyle(el,"border-width"));
offsetTop+=el.offsetTop+borderWidth;
offsetLeft+=el.offsetLeft+borderWidth;
el=el.offsetParent;
}
if(scrollTop+clientH>offsetTop-offset && scrollLeft+clientW>offsetLeft-offset){
return true;
}
else return false;
}
最后再让各自的scrollParent监听"scroll"，"resize"等事件即可：
function initListener(el){
let scrollParent=getScrollParent(el);
if(this.scrollParent.indexOf(scrollParent)<0){
position = getStyle(scrollParent, "position"); //若为window则返回null
if (position==="" || position === "static") scrollParent.style.position = "relative"; //确保能检测到正确的offsetTop和offsetLeft
} this.scrollParent.push(scrollParent); //数组用于保存已经监听的可滚动祖先节点
this.eventsList.forEach((event)=>{
scrollParent.addEventListener(event,this.loadImage.bind(this));
})
}
}
以上便是实现图片懒加载的关键代码。
如果有动态添加的img标签，该怎么办呢？其实很简单，只需要将新增的img元素push进这个lazyImg数组队列中，然后调用InitListener即可。
完整实现
利用以上原理，我实现了一个基于vue2.x的图片懒加载的插件。完整源码可参考vue-lazyload-images。
