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

 function isVisible(node){
   var currentTop = window.pageYOffset
   var currentHeight = window.innerHeight
   var nodeTop = node.offsetTop
   if(nodeTop < currentTop + currentHeight && nodeTop > currentTop){
      console.log('發(fā)現(xiàn)你啦！')
   }
 }

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

window.onload = function(){
  var scroll = document.querySelector('#scroll')
      
  function check(node){
    var currentTop = window.pageYOffset
    var currentHeight = window.innerHeight
    var nodeTop = node.offsetTop
    if(nodeTop < currentTop + currentHeight && nodeTop > currentTop){
      return true
    }
    return false
  }
      
  window.onscroll = function(){
    if(check(scroll)){
      console.log(true)
    }
  }
}

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

window.onload = function(){
  var scroll = document.querySelector('#scroll')
      
  function check(node){
    var currentTop = window.pageYOffset
    var currentHeight = window.innerHeight
    var nodeTop = node.offsetTop
    if(nodeTop < currentTop + currentHeight && nodeTop > currentTop){
      return true
    }
    return false
  }
      
  window.onscroll = function(){
    if(scroll.classList.contains('appear') && check(scroll)){
      scroll.classList.add('appear')
      console.log(true)
    }
  }
}

四、 圖片懶加載的原理是什么？

只有當圖片容器出現(xiàn)在用戶的可視范圍內(nèi)或者接近該范圍時，才向服務(wù)器請求該圖片。

五、實現(xiàn)視頻中的圖片懶加載效果

在線預(yù)覽 | GitHub