懒加载

懒加载是网站解决性能问题最常见的方式

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

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

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

      function isVisible($node){
        $(window).on("scroll", function(){
          var scrollTop = $(window).scrollTop()
          var windowHeight = $(window).height()
          var offset = $node.offset().top
          if((offset < scrollTop + windowHeight) && (offset > scrollTop)){
            console.log('true')
          }
        })  
      }

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

      var $span = $('#span1')
  
      $(window).on('scroll', function(){
        if($span.attr('show')){
          return
        }
        if(isVisible($span)){
          $span.attr('show', true)
          console.log('true')
        }
      })
  
      function isVisible($node){
         var scrollTop = $(window).scrollTop()
         var windowHeight = $(window).height()
         var offset = $node.offset().top
         if((offset < scrollTop + windowHeight) && (offset > scrollTop)){
           return true
         }else{
           return false
         }
      }

题目4： 图片懒加载的原理是什么？

延迟加载图片或符合某些条件时才加载某些图片，通常用于图片比较多的网页。可以减少请求数或者延迟请求数，优化性能。
【1】延时加载，使用setTimeout或setInterval两种方式来造成加载延迟，若用户在加载前就离开，就不再加载。
【2】条件加载，符合某些条件或者触发了某些条件才开始异步加载。
【3】可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般距离用户看到的底边很近的时候开始加载，这样能保证用户下拉时图片正好接上，不会有太长时间的停顿。

题目5： 实现视频中的图片懒加载效果

demo

题目6

demo