懒加载

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

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

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

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

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

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

    $(window).on('scroll',function () {
      if(isVisible($node) && !($node.data('hasLoad'))){
        $node.data('hasLoad', true)
        console.log('true')
      }
    })

4 懒加载原理

1.首先把图片的src属性设置为设置为空，或者放入一张空白图片，把图片真实地址放入自定义属性中。
2.当滚动页面时，判断img标签是否出现在视窗内。当img出现在视窗内进行判断图片是否已经加载，若加载过则无需处理，若未加载过则进行加载。

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

link