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

 function isVisible($node){
    var windowHeight = $(window).height()
    var scrollTop = $(window).scrollTop()
    var offsetTop = $node.offset().top

    if(offsetTop < windowHeight + scrollTop && offsetTop > scrollTop){
        return true
  }
    return false
 }

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

  $(window).on("scroll",function(){
    $node = $(".node")
    var windowHeight = $(window).height()
    var scrollTop = $(window).scrollTop()
    var offsetTop = $node.offset().top

    if(offsetTop < windowHeight + scrollTop && offsetTop > scrollTop){
        console.log("true")
        return true
    }
    return false
  })

}

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

    var flag = 0;
    $(window).on("scroll",function(){
      $node = $(".node")
      var windowHeight = $(window).height()
      var scrollTop = $(window).scrollTop()
      var offsetTop = $node.offset().top
    
      if(flag === 0){
      if(offsetTop < windowHeight + scrollTop && offsetTop  > scrollTop){
            console.log("true")
          flag = 1
             return true
      }
    return false
  }      
})

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

懶加載也叫延遲加載，舉個(gè)栗子比如圖片的懶加載：先在img src中放一張占位符圖片，而真實(shí)的圖片地址存放在相對(duì)應(yīng)一個(gè)屬性 data-img(后綴img可以自定義)中，這樣的話頁(yè)面加載的時(shí)候只加載src地址，不會(huì)對(duì)屬性的圖片真正地址加載，滾動(dòng)時(shí)候判斷待加載的資源相對(duì)于瀏覽器頂端的距離，可視區(qū)域相對(duì)于瀏覽器頂端的距離如果為true的話 則把相對(duì)應(yīng)的data-img值賦值給src否則不加載。

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

代碼效果