懒加载

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

function isVisible($node){
    var windowHeight = $(window).height(), //窗口高度
        scrollTop = $(window).scrollTop(), //滚动条滚动距离
        offsetTop = $node.offset().top, //元素距页面顶端高度
        nodeHeight = $node.outerHeight(true); //包括外边距
    if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){ //已进入页面，且未离开页面
        return true;
    }else{
        return false;
    }
}

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

function isVisible($node){
    var windowHeight = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offsetTop = $node.offset().top,
        nodeHeight = $node.outerHeight(true);
    if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){ //已进入页面，且未离开页面
        return true;
    }else{
        return false;
    }
}
$(window).on('scroll',function(){
    if(isVisible($node)){
        console.log(true)
    }
});

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

function isVisible($node){
    var windowHeight = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offsetTop = $node.offset().top,
        nodeHeight = $node.outerHeight(true); //包括外边距
    if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){ //已进入页面，且未离开页面
        return true;
    }else{
        return false;
    }
}

$(window).on('scroll',check);

function show($node){
    $node.each(function(){
        $(this).addClass('load'); //已经加载的元素添加class:load
        console.log(true)
    });
}
function check($node){
    $node.not('.load').each(function(){ //遍历未添加class为load的元素
        if(isVisible($(this))){
            show($(this))
        }
    });
}

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

将页面里所有img元素的src属性用data-src代替，将页面内未出现在可视区域内的图片先不做加载，其src值为一张空白图或其他，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。

5. 实现视频中的图片懒加载效果

代码预览

6. 实现视频中的新闻懒加载效果

代码地址 (本地测试可行)