进阶-任务16

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

function isVisible($node){
        if ($node.offset().top < $(window).height()+$(window).scrollTop() && $(window).scrollTop() < $node.offset().top+$node.height()) {
          console.log(true)
        }
}

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

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

demo

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

var $div = $('div')
      $(window).on('scroll', function(e) {
        if(isVisible($div) && !$div.hasClass('showed')) {
          $div.addClass('showed')
          console.log(true)
        }
      })
      function isVisible($node){
        if ($node.offset().top < $(window).height()+$(window).scrollTop() && $(window).scrollTop() < $node.offset().top+$node.height()) {
          return true
        }
      }

demo

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

对于图片过多的页面，为了防止请求阻塞，加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后，再去位图片设置src属性进行加载。
这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

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