懶加載是網(wǎng)站解決性能問題最常見的方式

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

function isVisible($node){
        var scrollTop = $(window).scrollTop()
        var windowHeight = $(window).height()
        var offset = $node.offset().top
        if((offset < scrollTop + windowHeight) && (offset > scrollTop)){
          return true
        }
        return false
      }

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

      function isVisible($node){
        $(window).on("scroll", function(){
          var scrollTop = $(window).scrollTop()
          var windowHeight = $(window).height()
          var offset = $node.offset().top
          if((offset < scrollTop + windowHeight) && (offset > scrollTop)){
            console.log('true')
          }
        })  
      }

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

      var $span = $('#span1')
  
      $(window).on('scroll', function(){
        if($span.attr('show')){
          return
        }
        if(isVisible($span)){
          $span.attr('show', true)
          console.log('true')
        }
      })
  
      function isVisible($node){
         var scrollTop = $(window).scrollTop()
         var windowHeight = $(window).height()
         var offset = $node.offset().top
         if((offset < scrollTop + windowHeight) && (offset > scrollTop)){
           return true
         }else{
           return false
         }
      }

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

延遲加載圖片或符合某些條件時才加載某些圖片，通常用于圖片比較多的網(wǎng)頁?？梢詼p少請求數(shù)或者延遲請求數(shù)，優(yōu)化性能。
【1】延時加載，使用setTimeout或setInterval兩種方式來造成加載延遲，若用戶在加載前就離開，就不再加載。
【2】條件加載，符合某些條件或者觸發(fā)了某些條件才開始異步加載。
【3】可視區(qū)域加載，僅僅加載用戶可以看到的區(qū)域，這個主要監(jiān)控滾動條來實現(xiàn)，一般距離用戶看到的底邊很近的時候開始加載，這樣能保證用戶下拉時圖片正好接上，不會有太長時間的停頓。

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

demo

題目6

demo