日常开发中，我们经常需要判断目标元素是否在视窗之内或者和视窗的距离小于一个值
- offsetTop、scrollTop （需要不断监听滚动事件）
- getBoundingClientRect（需要不断监听滚动事件）
- IntersectionObserver（推荐）

IntersectionObserver

IntersectionObserver() 构造器创建并返回一个IntersectionObserver对象。不用进行事件的监听，性能方面相比getBoundingClientRect会好很多

    // 获取所有图片
    let imgs = document.querySelectorAll('img')
    // 定义当元素重叠后的一系列操作
    const callback = (entries) => {
      entries.forEach((entry, i) => {
        // 判断是否重叠
        if (entry.isIntersecting) {
          // 获取到当前重叠的元素
          const img = entry.target
          const data_src = img.getAttribute('data-src')
          // 设置src
          img.setAttribute('src', data_src)
          // 设置完之后取消观察
          observer.unobserve(img)
          console.log('观察');
        }
      })
    }
    // 创建观察者实例
    const observer = new IntersectionObserver(callback)

    // 为每个图片都进行观察
    imgs.forEach((img) => {
      observer.observe(img)
    })

懒加载-IntersectionObserver

IntersectionObserver