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

$.fn.isVisible = function(){
    var nodeT = $(this).offset().top,
        screenH = $(window).height(),
        scrollT = $(document).scrollTop()
    if(nodeT > scrollT&&nodeT<screenH+scrollT){
        return true
    }
    return false
}

• 當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)
  代碼效果預(yù)覽

$(document).on('scroll',function(){
     var $target = $('.box-target')
     if($target.isVisible()) {
         console.log(true)
     }
})

• 當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)
  代碼效果預(yù)覽

 function isLoad($target) {
     if (!$target.data('isLoad')) {
         console.log(true)
         $target.data('isLoad',true)
     }
 }
 $(document).on('scroll',function(){
     var $target = $('.box-target')
     if($target.isVisible()) {
         isLoad($target)
     }
})

• 圖片懶加載的原理是什么
  1. 圖片懶加載實際上是叫圖片的延遲加載
  2. 目的是為了優(yōu)化頁面的渲染速度,出現(xiàn)在用戶可視范圍內(nèi)的圖片才加載
  3. 實現(xiàn)原理
     圖片可以先使用一張占位圖片顯示,真實的圖片地址保存在一個自定義的屬性當(dāng)中,當(dāng)圖片出現(xiàn)在窗口的可是范圍的時候,就將真實的地址替換掉占位圖片的地址