原生实现img-lazyLoad:图片延迟加载（基于intersection Observer）

intersection Observer简介

点击查阅MDN关于此api的使用说明

这个api是用来检测dom元素交集的，常见的应用场景之一就是本文提到的对图片进行懒加载，即：拖动窗口滚动条，到达当前这个图片的时候，再去读取挂在自定义属性（比如：'data-src'）上的url地址，之后将该url地址写到到src属性上去进行下载、展示这个图片。因此，我们关注的重点是：该图片是否滚动到了当前窗口的可视区域。通常解决的办法是，监听窗口元素的scroll事件，在事件处理程序中对图片的位置做判断。然而，这么做的一个弊端是，因为js是单线程的，而scroll事件出现的又很密集，每次都去响应scroll事件可能会影响用户体验。

intersection Observer的诞生就是为了处理这种类似于上文提到的元素交集检测。它会观察我们的 目标元素 ，当 目标元素 出现在 root元素 的可视区域时便会触发一个（我们事先放进去的）回调函数，于是我们可以在回调函数里面处理业务逻辑。

这里出现了两个小概念，对应于本文实现的图片懒加载功能来说：

• 目标元素：指的就是那些我们需要懒加载的图片
• root元素指的就是目标元素的父窗口，比如这里的图片的父元素容器

利用intersection Observer实现懒加载

点此查看该案例的stackblitz

查看该案例：

1. 在index.html页面内有一个scrollContainer，在里面首先是放了几段文字，之后是5个img元素，并将img的url地址写在了自定义属性'data-src'内。
2. 在css文件内定义了一些样式，其中，move-in是在我们对图片真正进行加载时才会添加的动画效果。

现在，无论我们怎么拖动滚动条都无法看见图片，因为我们仅仅是把img的url写在了自定义属性中而不是src属性中。接下来，我们需要利用intersection Observer对这些暂时看不见的图片元素进行观察，当确认他们滚动到了窗体的可视区域时，我们在回调函数中对其进行加载。

创建一个observer：

const observer = new IntersectionObserver(callback，option)

option配置root元素和回调函数触发机制，这里我们将scrollContainer这个div设为root。

callback就是当检测到目标元素与root元素交集时会调用的函数，形如：

(entrances, observer)=>{
    // entrances是个数组对象，包含了所有的目标元素，通常我们会遍历它们，并判断每一个单独的个体是否与root元素产生了交集，如果是，那么我们就会执行一些逻辑
}

连接目标元素

刚才我们创建了observer，并且设置了它的root元素，现在需要告诉这个observer，我们需要观察哪些目标元素与此root元素的交集。

通过 observer.observe(target) 进行链接

最终的代码

const imgs = document.querySelectorAll('img') //获取所有待观察的目标元素
var options = {
  root: document.querySelector('.scrollContainer'), 
  rootMargin: '0px',
  threshold: 1.0
}
function lazyLoad(target) {
  const observer = new IntersectionObserver((entrances, observer) => {
    entrances.forEach(entrance => {
      if (entrance.isIntersecting) {
        const img = entrance.target;
        const src = img.getAttribute('data-src');
        img.setAttribute('src', src)
        img.classList.add('move-in')
        observer.disconnect()
      }

    })
  }, options);
  observer.observe(target)
}

imgs.forEach(lazyLoad)