懒加载

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

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

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

$(window).on('scroll', function() {
  var $node = $('img')
    // if($node.hasClass('load')) return

  var scrollTop = $(window).scrollTop(),
    windowHeight = $(window).height(),
    offsetTop = $node.offset().top,
    nodeHeight = $node.outerHeight()

  if (offsetTop + nodeHeight > scrollTop && offsetTop < windowHeight + scrollTop) {
    console.log(true)
    $node.addClass('load')
  } else {
    console.log(false)
    $node.removeClass('load')
  }
})

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

var isVisible = true
$(window).on('scroll', function() {
  if (!isVisible) return
  var $node = $('img')
  var scrollTop = $(window).scrollTop(),
    windowHeight = $(window).height(),
    offsetTop = $node.offset().top,
    nodeHeight = $node.outerHeight()

  if (offsetTop + nodeHeight > scrollTop && offsetTop < windowHeight + scrollTop) {
    console.log(true)
    isVisible = false
  }
})

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

1.设置自定义属性'data-src'，'src'放一张预加载图片地址

![](预加载图片地址)

2.先检查图片是否出现在窗口视野中
3.检查图片是否已经加载完成
4.如果出现在视野中并且图片还未被加载，把图片自定义属性值赋值到src属性里面，替换预加载图片地址

$img.attr('src', $img.attr('data-src'))

懒加载