懒加载

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

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

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

$(window).on('scroll',function(){
    if(isVisible($('p'))){
            console.log('true')
        
    }else{
        console.log('false')
    }
})
function isVisible($node){
    var windowHeight = $(window).height()
        scrollTop = $(window).scrollTop()
        nodeTop = $node.offset().top
        nodeHeight = $node.height()
    if(nodeTop < windowHeight + scrollTop& scrollTop < nodeTop + nodeHeight){
        return true
    }else{
        return false
    }
}

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

var clock = 0;
$(window).on('scroll',function(){
    if(isVisible($('p'))){
        clock++
        if(clock == 1){
            console.log('true')
        }
    }else{
        console.log('false')
    }
})
function isVisible($node){
    var windowHeight = $(window).height()
        scrollTop = $(window).scrollTop()
        nodeTop = $node.offset().top
        nodeHeight = $node.height()
    if(nodeTop < windowHeight + scrollTop& scrollTop < nodeTop + nodeHeight){
        return true
    }else{
        return false
    }
}

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

• 懒加载的原理是通过自定义属性标签存放图片原有的src属性，当img标签出现在浏览器窗口范围内再依次将原src属性填充以达到懒加载的效果。这种方法减少了开始加载网页时的请求，减少浏览器卡死的几率，减少了流量的消耗，同时提高了用户体验。

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

代码
预览