懒加载

一、如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现

 function isVisible(node){
   var currentTop = window.pageYOffset
   var currentHeight = window.innerHeight
   var nodeTop = node.offsetTop
   if(nodeTop < currentTop + currentHeight && nodeTop > currentTop){
      console.log('发现你啦！')
   }
 }

二、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现

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)
    }
  }
}

三、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现

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)
    }
  }
}

四、 图片懒加载的原理是什么？

只有当图片容器出现在用户的可视范围内或者接近该范围时，才向服务器请求该图片。

五、实现视频中的图片懒加载效果

在线预览 | GitHub