Javascript实现图片懒加载插件的方法
前言
网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，具体实现的技术并不复杂，下面分别对其说明。
Web图片的懒加载就是通过读取img元素，然后获得img元素的data-src（也可以约定为其他属性名）属性的值，并赋予img的src，从而实现动态加载图片的机制。
这里需要注意的是：img在初始化的时候不要设置src属性，因为即使设置src=''浏览器也会尝试加载图片。
一个简单的图片懒加载共涉及两个方面
1.HTML约定
我们首先需要给准备实施懒加载的img元素添加指定的class这里为m-lazyload,同时将imgsrc赋值给data-src属性。
具体示例为：
<imgclass="m-lazyload"data-src="imgUrl">
2.JavaScript实现
动态加载总共分为以下几个步骤，这里每个步骤都将被拆分为独立的函数
1.添加页面滚动监听事件
window.addEventListener('scroll',_delay,false);
function_delay(){
clearTimeout(delay);
delay=setTimeout(function(){
_loadImage();
},time);
}
2.当触发监听事件时会执行_loadImage函数，该函数负责加载图片
function_loadImage(){
for(vari=imgList.length;i--;){
varel=imgList[i];
if(_isShow(el)){
el.src=el.getAttribute('data-src');
el.className=el.className.replace(newRegExp("(\\s|^)"+_selector.substring(1,_selector.length)+"(\\s|$)"),"");
imgList.splice(i,1);
}
}
}
虽然执行了_loadImage函数，但是我们得知道哪些图片需要被加载，这里的判断依据是什么呢？
依据就是判断该图片是否在当前窗口的可视区域内，在这里我们封装一个_isShow函数来实现
function_isShow(el){
varcoords=el.getBoundingClientRect();
return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));
}
自此一个图片加载的闭环就形成了
当网页滚动的事件被触发->执行加载图片操作->判断图片是否在可视区域内->在，则动态将data-src的值赋予该图片。
太简单了？
事实就是如此！！！
如此简单，不妨扩展一下
添加一些自定义参数，谁都喜欢自定义，不是吗？
支持iScroll,iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。
这里我们做了些优化
图片加载后移除选择器，避免重复判断。
缓存img元素结合，减少dom元素查询性能损耗
扩展prototype添加getNode方法，支持分页数据懒加载（由于我们之前缓存了dom元素）
OK！说了这么多，showmethecode吧！
(function(){
varimgList=[],//页面所有img元素集合
delay,//setTimeout对象
offset,//偏移量，用于指定图片距离可视区域多少距离，进行加载
time,//延迟载入时间
_selector;//选择器默认为.m-lazyload
function_isShow(el){
varcoords=el.getBoundingClientRect();
return((coords.top>=0&&coords.left>=0&&coords.top)<=(window.innerHeight||document.documentElement.clientHeight)+parseInt(offset));
}
function_loadImage(){
for(vari=imgList.length;i--;){
varel=imgList[i];
if(_isShow(el)){
el.src=el.getAttribute('data-src');
el.className=el.className.replace(newRegExp("(\\s|^)"+_selector.substring(1,_selector.length)+"(\\s|$)"),"");
imgList.splice(i,1);
}
}
}
function_delay(){
clearTimeout(delay);
delay=setTimeout(function(){
_loadImage();
},time);
}
functionImageLazyload(selector,options){
vardefaults=options||{};
offset=defaults.offset||0;
time=defaults.time||250;
_selector=selector||'.m-lazyload';
this.getNode();
_delay();//避免首次加载未触发touch事件,主动触发一次加载函数
if(defaults.iScroll){
defaults.iScroll.on('scroll',_delay);
defaults.iScroll.on('scrollEnd',_delay);
}else{
window.addEventListener('scroll',_delay,false);
}
}
ImageLazyload.prototype.getNode=function(){
imgList=[];
varnodes=document.querySelectorAll(_selector);
for(vari=0,l=nodes.length;i<l;i++){
imgList.push(nodes[i]);
}
};
})();
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用图片懒加载的时候能有所帮助，如果有有疑问大家可以留言交流。