进阶16 懒加载

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

 function isVisible($node){
    var windowHeight = $(window).height()
    var scrollTop = $(window).scrollTop()
    var offsetTop = $node.offset().top

    if(offsetTop < windowHeight + scrollTop && offsetTop > scrollTop){
        return true
  }
    return false
 }

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

  $(window).on("scroll",function(){
    $node = $(".node")
    var windowHeight = $(window).height()
    var scrollTop = $(window).scrollTop()
    var offsetTop = $node.offset().top

    if(offsetTop < windowHeight + scrollTop && offsetTop > scrollTop){
        console.log("true")
        return true
    }
    return false
  })

}

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

    var flag = 0;
    $(window).on("scroll",function(){
      $node = $(".node")
      var windowHeight = $(window).height()
      var scrollTop = $(window).scrollTop()
      var offsetTop = $node.offset().top
    
      if(flag === 0){
      if(offsetTop < windowHeight + scrollTop && offsetTop  > scrollTop){
            console.log("true")
          flag = 1
             return true
      }
    return false
  }      
})

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

懒加载也叫延迟加载，举个栗子比如图片的懒加载：先在img src中放一张占位符图片，而真实的图片地址存放在相对应一个属性 data-img(后缀img可以自定义)中，这样的话页面加载的时候只加载src地址，不会对属性的图片真正地址加载，滚动时候判断待加载的资源相对于浏览器顶端的距离，可视区域相对于浏览器顶端的距离如果为true的话 则把相对应的data-img值赋值给src否则不加载。

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

代码效果