点击检察视频教程哦！！！！

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)