原生实现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)