懒加载

解析

懒加载，又称为延迟加载。
在程序启动的时候先不加载，在程序运行的时候再去加载需要的资源。

作用

在访问数据量过大时，减少并发量，降低系统资源的消耗，节省内存空间；
优化网站性能，提高用户体验。

原理

图片懒加载：
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)){
        }
    }

应用

demo-图片懒加载
demo-新闻懒加载

问题

1 一开始是空白？
首先检查是否在可视范围，进行加载

2 鼠标滚动，连续多次触发事件？
添加状态锁，本次加载完成前不触发事件

3 数据获取一直进行，无法结束？
添加数据锁，检测到没有新数据，不加载并退出