懒加载

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

你可能感兴趣的:(懒加载)