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

function isVisible($node){
    var scrollTop = $(window).scrollTop() //窗口滾動距離
    var windowHeight = $(window).height() //窗口的高度
    var offsetTop = $node.offset().top //目標元素相對于頁面頂部的偏移距離
//兩個臨界點,最小值是滾動高度,最大值是窗口高度加窗口滾動的距離
    if(offsetTop  < scrollTop + windowHeight && offsetTop > scrollTop){
          return true
    }
    return false
}

題目2：當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)

$(window).on('scroll',function(){
    if(isVisible($node){
        console.log(true)
    }
    function isVisible($node){
        var scrollTop = $(window).scrollTop() //窗口滾動距離
        var windowHeight = $(window).height() //窗口的高度
        var offsetTop = $node.offset().top //目標元素相對于頁面頂部的偏移距離
//兩個臨界點,最小值是滾動高度,最大值是窗口高度加窗口滾動的距離
        if(offsetTop  < scrollTop + windowHeight && offsetTop > scrollTop){
          console.log('true')
          return true
    }
    return false
    }
})

題目3：當窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)

$(window).on('scroll',function(){
     $('.container img').each(function(){
    if( isVisible($(this)) && !isLoaded($(this)) ){   
//遍歷每個圖片如果出現(xiàn)在可視范圍內(nèi)并且沒有被加載過,加載圖片并且打印true,否則不做處理
      loadImg($(this))
      console.log("true")
    }
  }) 
})

function isVisible($img){           //檢查元素是否出現(xiàn)在窗口可視范圍
  var scrollTop = $(window).scrollTop()   //滾動高度
  var windowHeight = $(window).height()   //窗口高度
  var offsetTop = $img.offset().top  //頁面頂點至目標的高度
  if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop)  //兩個臨界點,一個最小值是滾動高度,一個最大值是滾動高度加窗口高度
   {
     return true
 }
 return false
}

function isLoaded($img){            //返回布爾值
  return $img.attr('data-src') === $img.attr('src')
}

function loadImg(#img) {
  $img.attr('src',$img.attr('data-src'))
}

題目4： 圖片懶加載的原理是什么？

• 為什么要懶加載：
  懶加載即延遲，對于圖片過多的頁面，為了加快頁面加載速度，我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動到可視區(qū)域后再去加載。
  這樣一來頁面加載性能大幅提升，提高了用戶體驗。
• 實現(xiàn)原理：
  • 在頁面載入時將img標簽內(nèi)的src指向一個小圖片，即占位圖，將真實地址存放于一個自定義屬性data-src中，然后獲取頁面上的img標簽并保存，開啟一個定時器來遍歷保存的img標簽，接下來判斷每個img是否出現(xiàn)在可視區(qū)，當某個img出現(xiàn)在了可視區(qū)域，就將真實地址賦值給該img的src并將該img從數(shù)組中刪除以避免重復判斷。
  • 判斷元素是否出現(xiàn)在了可視區(qū)
  • 實現(xiàn)流程：
    1.網(wǎng)頁滾動事件觸發(fā)
    2.執(zhí)行加載圖片操作
    3.判斷圖片是否在可視區(qū)且是否已經(jīng)加載過
    4.在可視區(qū)且未被加載過則動態(tài)地將data-src的值賦給該圖片的src屬性。

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

實現(xiàn):http://js.jirengu.com/jebafozuwa/1/edit