懒加载

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

//取元素两个临界值：1.元素的底部>=滚动距离
//2.元素的顶部<=滚动距离+可视高度
    function isVisible($node){
        var windowHheight = $(window).height();
        var scrollTop = $(window).scrollTop();
        var offsetTop=$($node).offset().top;
        var eleH = $($node).height();
        if(offsetTop +eleH>=scrollTop && offsetTop <= scrollTop + windowHheight){
            return true 
        }else{
            return false;
        }
    }
        console.log(isVisible(ele));

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

//沿用上一题的函数isVisible(ele)。
    $(window).scroll(function(){
        console.log(isVisible(ele));
    })
            

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

//沿用题目1的函数isVisible(ele),加个状态锁，判断出现时，关闭锁。
var flag=true;
        $(window).scroll(function(){
            if( !!isVisible(ele) && !!flag){
                console.log(true)
                flag=false;
            }
        })

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

1. 对于所有的 img 标签，把真实的地址放入自定义属性data-img
2. 当滚动页面时，检查页面所有的 img 标签，看看这个标签是否出现到我们的视野，当出现在我们的视野时，再去判断它是否已经加载过，如果没有加载过，加载它

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

图片懒加载效果展示

题目6(选做)：

实现如下 新闻自动懒加载效果29 ;

代码地址