使用IntersectionObserver实现图片懒加载

传统的图片懒加载实现思路是判断图片的 top 区域是否小于父级区域，且自身高度加上 top 大于 0，不过这样写的话有一个问题就是我们监听的事件会重复多次触发，所以我们还需要写一个节流或者防抖函数，不过使用 IntersectionObserver 我们可以轻松实现，首先看下兼容性

可以看到差强人意，不过好在可以 polyfill ，下面就介绍使用

使用方法

IntersectionObserver 使用方法很简单

var observer = new IntersectionObserver(callback[, options]);
复制代码

callback 接收两个参数，一个 IntersectionObserverEntry 对象列表(list)，以及触发 IntersectionObserverEntry 的实例

注意 callback 的回调函数会触发两次，第一次是元素开始可见，第二次是元素不可见的时候。

选项(options)

注意可选属性

实例

const dom = new IntersectionObserver(a => {
  console.log(a);
});
Array.from(document.querySelectorAll("img")).forEach(f => {
  dom.observe(f);
});
复制代码

返回的 a 是一个数组，里面存放着一些元素信息，下面所有属性都是只读

实现

上面已经实现判断元素是否可见，下面我们只需要根据上面思路完善一下即可开发一个图片懒加载的类，首先先说明一下图片懒加载一般情况下为了防止图片 src 为空样式不统一和加载图片突然拉伸空间，会给默认的图片设置一个占位图片，或者给定一个样式

img {
  width: 400px;
  height: 400px;
  display: inline-block;
}
复制代码

<img />
复制代码

上面给了一个简单的演示，注意 src 属性不要写，因为即使为空也还会加载。 顺便说下火狐浏览器如果 img 标签没有其他属性的话会理解成内联元素，就是 span 标签一样的内联元素，所以如果不放置占位图片的话推荐重置 img 为 inline-block 然后设置固定宽高。

之后就是给图片动态添加 src 属性，比较推荐的是 data- 的自定义属性，许多库用的也是这个方法，替换完成之后将图片元素从 IntersectionObserver 移除。