懒加载

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

//函数实现方法
function isVisible($node){
    var winH = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offSetTop = $(window).offSet().top;
    if (offSetTop < winH + scrollTop) {
        return true;
    } else {
        return false;
    }
}
//每次滚动检查元素是否出现在窗口可视范围内：每次出现都在控制台打印 true 
$(window).on("scroll", function{
    if (isVisible($node)){
        console.log(true);
    }
})
//元素只在第一次被检查到时打印true，之后就不再打印了
$(window).on('scroll',function(){
    if(isVisible($node)){
        if(!$node.hasClass('active')){
            console.log('true');
            $node.addClass('active')
        }   
    }
});

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

懒加载的概念，就是等到让图片出现在浏览器中的窗口的时候再去加载该图片资源。
先将img标签中的src链接设为一个小图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。

优点：减轻服务器的压力，可以让加载好的页面更快地呈现在用户面前。

图片懒加载效果
代码

新闻懒加载
index.html
router.js