懒加载

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

function isVisible($node){ 
  var winH = $(window).height(), //窗口高度
  var offsetH = $node.offset().top, //此元素垂直方向偏移
  var scrollH = $(window).scrollTop() //垂直滚动距离
      if ((offsetH > scrollH) && (offsetH < scrollH + winH)) { //根据这三个参数的值进行判定
        return true
      }
      return false
}

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

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

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

function isVisible($node) {
      $(window).on('scroll', function () {
        var scrollTop = $(this).scrollTop()
        var winH = $(this).height()
        var top = $node.offset().top
        if (scrollTop + winH > top) {
          if ($node.data('visible')) {
            return
          }
          $node.data('visible', true)
          console.log('true')
        } else {
          $node.data('visible', false)
        }
      })
    }

题目4： 图片懒加载的原理是什么？
为了整体网站的性能考虑，延时加载图片。把图片真实的URL 放在data-img的值中,当图片进入可视区域把data-img赋给src。
题目5： 实现视频中的图片懒加载效果
http://js.jirengu.com/molifogebi/1/edit