懒加载

题目1：

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

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

题目2：

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

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

题目3：

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

$(window).on("scroll", function(){
    if(isVisible($node) && $node.not('.show').length > 0){
        console.log(true);
        $node.addClass("show");
    }
})

题目4：

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

懒加载原理：

1. 图片的地址先放在自定义的属性data-src中，这样图片不会加载。
2. 判断，当图片位置出现在窗口可视范围时候，获取data-src中的地址，写入src属性中生效加载。

题目5：

实现视频中的图片懒加载效果
页面效果
代码

题目6：

实现视频中的新闻懒加载效果
前端代码
后端router.js