1：如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫一個函數(shù) isVisible實現(xiàn)

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：當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)

$(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：當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)

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： 圖片懶加載的原理是什么？

• 懶加載的原理是通過自定義屬性標(biāo)簽存放圖片原有的src屬性，當(dāng)img標(biāo)簽出現(xiàn)在瀏覽器窗口范圍內(nèi)再依次將原src屬性填充以達(dá)到懶加載的效果。這種方法減少了開始加載網(wǎng)頁時的請求，減少瀏覽器卡死的幾率，減少了流量的消耗，同時提高了用戶體驗。

5： 實現(xiàn)視頻中的圖片懶加載效果

代碼
預(yù)覽