进阶16 图片懒加载

题目1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 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
 }

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

    
    
    
    



    
第1个元素
    
第2个元素
    
第3个元素
    
第4个元素
    
第5个元素
    
第6个元素
    
第7个元素
    
第8个元素
    
第9个元素
    
第10个元素
    

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

    
    
    
    



    
第1个元素
    
第2个元素
    
第3个元素
    
第4个元素
    
第5个元素
    
第6个元素
    
第7个元素
    
第8个元素
    
第9个元素
    
第10个元素
    

题目4： 图片懒加载的原理是什么？

1. 对于所有的img标签，把真实的地址放入自定义属性内，例如放到data-src内，
2. 当页面滚动时，检查页面所有的img，判断该img标签是否出现在屏幕显示范围内；
3. 当该img标签出现在屏幕显示范围内，判断该img标签是否已经加载过；
4. 如果该img标签没有加载过，通过JS给img的SCR属性赋值，加载该img标签

题目5： 实现视频中的图片懒加载效果

题目5