解析
懒加载，又称为延迟加载。
在程序启动的时候先不加载，在程序运行的时候再去加载需要的资源。
作用
在访问数据量过大时，减少并发量，降低系统资源的消耗，节省内存空间；
优化网站性能，提高用户体验。
原理
图片懒加载：
h 将所有img标签的src指向同一张图，当页面加载时作为占位图存在；
h 自定义属性data-src，用来存储真实的图片链接；
0 给window绑定scroll事件
1 判断图片是否出现在可视区域即需要加载此资源;
2 把src的值替换为data-src开始加载图片并显示;
3 添加arrt或class为loaded防止重复加载。
新闻懒加载：
0 给window绑定scroll事件；
1 判断新闻是否出现在可视区域；
2 用ajax获得后台news数据；
3 把数据填充在html标签里，放在页面上；
核心
可视区域 scrollTop、offsetTop......
由于 ：
窗口高度 + 垂直滚动距离 = 元素垂直方向距离
所以 ：
窗口高度 + 垂直滚动距离 > 元素垂直方向距离 元素开始出现
垂直滚动距离 > 元素垂直方向距离 元素开始消失
垂直滚动距离 > 元素垂直方向距离 + 元素自身高度 元素消失完毕
------------------------------------判断可视区域
function isVisible($node) {
var windowHeight = $(window).height(), //窗口高度
scrollTop = $(window).scrollTop() //垂直滚动距离
offsetTop = $node.offset().top, //此元素垂直方向距离
nodeHeight = $node.outerHeight(true); //元素自身高度
if (windowHeight + scrollTop > offsetTop && offsetTop + nodeHeight > scrollTop){
return true }
return false
}
------------------------------------每当元素出现在窗口，控制台输出true
$(window).on('scroll',function result(){
if( isVisible($node) ){
console.log(true);
}
})
------------------------------------仅当元素第一次出现在窗口，控制台输出true
$(window).on('scroll',result);
function result(){
if($node.not('.show').length === 1 && isVisible($node)){
console.log(true);
$node.addClass('.show');
}
else if(!isVisible($node)){
}
}
应用
问题
1 一开始是空白？
首先检查是否在可视范围，进行加载
2 鼠标滚动，连续多次触发事件？
添加状态锁，本次加载完成前不触发事件
3 数据获取一直进行，无法结束？
添加数据锁，检测到没有新数据，不加载并退出
