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

實現

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

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

$(window).on('scroll',function(){
 console.log(isVisible($('#box')))
})

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

var $box = $('#box')

function isLoaded($node){
  return ($node.data('flag')===1)
}

$(window).on('scroll',function(){
 if( isVisible($box) && !isLoaded($box) ){
   $box.data('flag',1)
   console.log('true')
 }
})

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

將img標簽中的src鏈接設為同一張圖片占位（只需請求一次），將其真正的圖片地址存儲在img標簽的自定義屬性中（比如data-src）。

• 條件加載：符合某些條件，或觸發(fā)了某些事件，才將自定義屬性中的地址存儲到src屬性中，開始加載圖片
• 可視區(qū)加載：僅加載用戶可以看到的區(qū)域。當js監(jiān)聽到該圖片元素進入可視窗口時，將自定義屬性中的地址存儲到src屬性中，開始加載圖片

這樣做能防止頁面一次性向服務器響應大量請求導致服務器響應慢，頁面卡頓或崩潰等問題。

題目5： 實現視頻中的圖片懶加載效果

效果