懒加载

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

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

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

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

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

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

4. 图片懒加载的原理是什么？

1. 首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。
2. 页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。
3. 在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

5. 实现视频中的图片懒加载效果

预览 - https://haitaowang555.github.io/JS-/%E6%87%92%E5%8A%A0%E8%BD%BD/index.html