2018-5-24 周周
1.什么是懒加载？
当访问一个页面的时候，先把img元素背景图片路径替换成一张替代图片的路径（这样就只需请求一次，占位图），将图片的真实路径存储在img自定义属性中，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。
2.为什么要用懒加载？
很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕，提高首屏加载速度，可以减轻服务器压力，节约流量，用户体验好。
3.懒加载实现封装？
lazyLoad由四个函数组成，init(初始化函数)，checkShow（判断图片是否加载），shouldShow（将要展示的图片），showImg（展示图片）。
（1）初始化函数(init) 由于滚动事件太消耗性能，所以用定时器替换,不是滚动就触发,而是滚动后200毫秒后触发。
var timer;
function init(){
$(window).on("scroll",function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function(){
checkShow(); //
},200);
});
}
（2）判断”图片是否加载“（checkshow）函数，如果图片有isload属性，就说明图片已经加载过了，直接return。如果图片没有isload属性，进入将要展示图片shouldshow函数
function checkShow(){
$lazyLoad.each(function(){
$cur = $(this);
if($cur.attr('isLoaded')){
return;
}
if(shouldShow($cur)){
showImg($cur);
}
});
}
（3）将要展示图片shouldshow函数，获取屏幕可视宽度，滚动高度，要展示的元素到文档的高度，如果元素到文档的高度小于屏幕的可视高度加上滚动高度，说明元素已在可视区内，返回true，否则返回false。
function shouldShow ($node){
var scrollH = $(window).scrollTop(),
windowH = $(window).height(),
top = $node.offset().top;
if(top < windowH + scrollH){
return true;
} else {
return false;
}
}
（4）“展示图片”函数，将元素的src属性替换为自定义属性data-src(真正图片的地址)。
function showImg ($node){
$node.find("img").attr("src",$node.data("src"));
$node.attr("isLoaded",true);
}
（5）函数返回一个对象
return {
init : init
}
这样就实现懒加载封装了！