lazy load

[MorganXie]

如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

 function isVisible($node){
        var scrollTop = $(window).scrollTop();
        var windowHeight = $(window).height();
        var offsetTop = $node.offset().top;
        if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
            return true;
        }
        return false;
 }
 

当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

```
 function isVisible($node){
    var scrollTop = $(window).scrollTop();
    var windowHeight = $(window).height();
    var offsetTop = $node.offset().top;
    if (offsetTop < scrollTop + windowHeight && offsetTop > scrollTop) {
        return true;
    }
    return false;
 }



	 $(window).on('scroll',function(){
     if (isVisible){
         console.log('true')
     }
   })

```

当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

代码

图片懒加载的原理是什么？

1. 为了让浏览器不去加载img，将img的src链接设为同一张白色图片占位，将真实的图片地址放在自定义属性（如data-src）当需要加载图片时，把data-src中的图片地址赋给img的src
2. 当js监听到该图片元素进入窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。
3. 设置何时加载：滚动页面时，检查页面所有的img标签，判断这个标签是否出现在我们的视野，当出现在我们的视野中，再去判读是否已经加载过，若未加载，则将自定义属性中的地址存储到src属性中。

实现视频中的图片懒加载效果

代码

新闻自动懒加载

代码