转载地址
http://hjingren.cn/2017/06/09/js%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD/
懒加载的意义
懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数，对服务器缓压。
预加载:提前加载好，缓存到本地，当需要的时候直接读取缓存，对服务器增压
第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟
第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载
第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片
Web 图片的懒加载就是通过读取img元素，然后获得img元素的data-src（也可以约定为其他属性名）属性的值，并赋予img的src，从而实现动态加载图片的机制
我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。
具体示例为：
1
动态加载总共分为以下几个步骤:
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);
}
}
}
3、判断该图片是否在当前窗口的可视区域内
function_isShow(el){
varcoords = el.getBoundingClientRect();
return( (coords.top >=0&& coords.left >=0&& coords.top) <= (window.innerHeight ||document.documentElement.clientHeight) +parseInt(offset));
}
到这一个简单的图片懒加载就写成了
当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否在可视区域内 -> 在，则动态将data-src的值赋予该图片。
