問(wèn)答

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

function isVisible($el){
      var scrollH = $(window).scrollTop(),
      winH = $(window).height(),
      top = $el.offset().top;
      
      if(top < winH + scrollH){
        return true;        
      }else{
        return false;
      }
}

2.當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 。用代碼實(shí)現(xiàn)

$(window).on('scroll',function(){
    if(isVisible($el){
    console.log(true);
    }
})

3.當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)

$(window).on('scroll',function(){
    if(isVisible($el)){
    print();
    $(this).attr('isLoading',true);
    }
})

function print($el){
    if($el.attr('isLoading')){
        return;
    }else{
        console.log(true);
    }
}

4. 圖片懶加載的原理是什么？

用戶滾到哪個(gè)位置，哪個(gè)位置再加載圖片。

代碼

代碼1

代碼2

代碼3

本文版權(quán)歸作者_(dá)Josh和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源