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

function isVisible($node){
        if ($node.offset().top < $(window).height()+$(window).scrollTop() && $(window).scrollTop() < $node.offset().top+$node.height()) {
          console.log(true)
        }
}

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

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

demo

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

var $div = $('div')
      $(window).on('scroll', function(e) {
        if(isVisible($div) && !$div.hasClass('showed')) {
          $div.addClass('showed')
          console.log(true)
        }
      })
      function isVisible($node){
        if ($node.offset().top < $(window).height()+$(window).scrollTop() && $(window).scrollTop() < $node.offset().top+$node.height()) {
          return true
        }
      }

demo

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

對于圖片過多的頁面，為了防止請求阻塞，加速頁面加載速度，所以很多時候我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載， 等到滾動到可視區(qū)域后，再去位圖片設(shè)置src屬性進行加載。
這樣子對于頁面加載性能上會有很大的提升，也提高了用戶體驗。

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