使用 IntersectionObserver实现图片懒加载

图片懒加载

实现图片懒加载之前，首先给大家介绍一个可以自动观察元素是否可见的Api: IntersectionObserver,字面意思就是交叉观察。之所以叫交叉观察，因为当图片出现在可视区域时，会和可视区域有一个交叉的过程，当图片开始和可视区域交叉的时候也就意味着图片开始进入可视区域。 IntersectionObserver本质上是一个构造函数，它接受两个参数：
第一个参数是回调函数，看见元素了触发一次，看不见了再触发一次，第二个参数是配置对象，不做讲解

var observe = new IntersectionObserver(callback, option);

这里的observe实例可以想象成是一个“观察者”，具体要观察哪个Dom节点就调用这个实例的observe方法：

observe.observe(DOM节点);

图片被加载出来就没有必要观察了，想要取消观察就调用unobserve方法：

observe.unobserve(DOM节点);

了解这些之后就可以开始实现图片懒加载了所谓图片懒加载，就是在图片未出现在可视区域时不进行加载，图片出现在可视区域时再进行加载。我们都知道图片加载依靠img的src属性。我们想让图片在出现在可视区域之前不加载，就要在src属性上做处理，这里就用到了自定义属性,浏览器碰到自定义属性时不会进行处理，我们的思路是在图片出现在可视区域时用src替换掉自定义属性data-src：

<img data-src = "one.png">;
<img data-src = "two.png">

首先要拿到所有的图片，也就是img标签，querySelectorAll是一个原生的选择符，可以返回所有匹配到的元素，我们用这个方法来获取页面所有的img：

const images = document.querySelectorAll('img');

拿到图片之后，我们要使用observe方法，对图片进行观察：

images.forEach( image => {
    observe.observe( image );
})

我们想要在图片出现在可视区域，和在可视区域消失时做一些事情，那就用到了上面的回调函数

const callback = entries => {
   entries.forEach( entry => {
       if( entry.isIntersecting ){
           const image = entry.target;
           const data_src = image.getAttribute( 'data_src' );
           image.setAttribute('src', data_src);//用src替换掉data-src
           observe.unobserve( image );//图片加载出来就停止观察
       }
   })
};

代码讲解：
callback回调函数接受的是一个数组，这个数组就是所有要观察的对象（大家可以在控制台打印出来看一下就懂了）。数组中的对象的isIntersecting属性是一个布尔型，元素没进入可视区域时是false,进入到可视区域时变成true。而target属性则是我们要显示元素，也就是图片。而setAttribute方法则是把我们设置的自定义属性赋值给src,就可以请求到图片。但是回调函数在每次元素出现和消失时都会触发，当用户来回滚动页面时，回调函数会频繁的触发，对此我们要进行优化，就是当图片已经加载出来之后，就停止对该图片的观察，就不会再触发回调函数所以使用了unobserve方法。

至此图片的懒加载就完成了。