IntersectionObserver 和懒加载

1,767 阅读4分钟

IntersectionObserver 这个 API 平常可能听得比较少,caniuse 兼容性报告目前支持率是 90.12%,还不推荐用于大众化的场景中,但是它的能力和性能非常的好。

IntersectionObserver

关于 IntersectionObserver

示意图

IntersectionObserver 接口 (从属于Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)。由于可见(visible)的本质是,目标元素与视口产生一个交叉区,所以这个 API 叫做"交叉观察器"。

简单点说就是它可以观察 root(默认是视口)和目标元素的交叉情况,当交叉率是 0% 或者 10% 或者更多的时候,可以触发指定的回调。

当一个 IntersectionObserver 对象被创建时,其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建,则无法更改其配置,所以一个给定的观察者对象只能用来监听可见区域的特定变化值;然而,你可以在同一个观察者对象中配置监听多个目标元素。

使用

const observer = new IntersectionObserver(callback, observerConfig)

创建一个新的 IntersectionObserver 对象,当其监听到目标元素的可见部分穿过了一个或多个阈(thresholds)时,会执行指定的回调函数。

用法

function cb (entries) {
  console.log(entries)
  entries.forEach(entry => {
    const target = entry.target;
    console.log(target)
    console.log(entry)
  });
}

let observerConfig = {
  root: null,
  rootMargin: '0px',
  threshold: [0],
}

const observer = new IntersectionObserver(cb, observerConfig)
const box = document.getElementById('#box')
// 开始观察
observer.observe(box)
// 停止观察
observer.unobserve(box)
// 关闭观察器,observer 所有的观察都会停止
observer.disconnect();

entries 是一个监听目标的数组,每个成员都是一个 IntersectionObserverEntry 对象。

cb 回调函数在最初会调用一次,这次 entries 会是所有的观察目标对象,在滑动的时候会把可见性变化符合 threshold 的对象作为 entries 传进来。

初始化(全部被观察的)

image

滚动时(符合条件的)

image

由于是异步的操作,可以看到 start end 这两个同步操作执行之后,才会执行 cb

IntersectionObserverEntry

{
  boundingClientRect: DOMRectReadOnly {x: 8, y: 380, width: 300, height: 300, top: 380, …}
  intersectionRatio: 0.023333333432674408
  intersectionRect: DOMRectReadOnly {x: 8, y: 380, width: 300, height: 7, top: 380, …}
  isIntersecting: true
  rootBounds: DOMRectReadOnly {x: 0, y: 0, width: 1903, height: 387, top: 0, …}
  target: img.lazy
  time: 440149.8099999735
}

含义如下

  • time:可见性发生变化的时间,是一个高精度时间戳,单位为毫秒,返回一个记录从 IntersectionObserver 的时间原点(time origin)到交叉被触发的时间的时间戳(DOMHighResTimeStamp).
  • target:被观察的目标元素,是一个 DOM 节点对象
  • rootBounds:根元素的矩形区域的信息,getBoundingClientRect() 方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回 null
  • boundingClientRect:目标元素的矩形区域的信息
  • intersectionRect:目标元素与视口(或根元素)的交叉区域的信息
  • intersectionRatio:目标元素的可见比例,即 intersectionRectboundingClientRect 的比例,完全可见时为 1,完全不可见时小于等于0
  • isIntersecting 是否交叉

配置

observerConfig.root 所监听对象的具体祖先元素(element)。如果未传入值或值为 null,则默认使用顶级文档的视窗。

observerConfig.rootMargin 计算交叉时添加到根(root)边界盒 bounding box 的矩形偏移量, 可以有效的缩小或扩大根的判定范围从而满足计算需要。所有的偏移量均可用像素(pixel)(px)或百分比(percentage)(%)来表达, 默认值为"0px 0px 0px 0px",用法和普通的 margin 一样(top、right、bottom、left)。

observerConfig.threshold 注意 MDN 文档中的 thresholds 是错误的,一个包含阈值的列表, 按升序排列, 列表中的每个阈值都是监听对象的交叉区域与边界区域的比率。当监听对象的任何阈值被越过时,都会生成一个通知(Notification)。如果构造器未传入值, 则默认值为0,也可以是 [0, 0.25, 0.5, 0.75, 1]

懒加载的常规实现

常规实现都会监听滚动事件,通过 el.getBoundingClientRect() 获取到当前元素与视口的位置关系来确定图片是否加载,在加载完成之后为了性能考虑,删除 data-src ,这样就可以避免重复的执行,要注意的是 getBoundingClientRect 会触发浏览器的回流

getBoundingClientRect 这个方法的支持度已经非常高,可以放心使用。

getBoundingClientRect

核心是下面这个判断,这个方法可以只加载和视口交叉的元素,不会加载视口上面或者视口下面的图片。

$img.dataset.src
  && $img.getBoundingClientRect().bottom >= 0
  && windowHeight > $img.getBoundingClientRect().top
  1. 如果不存在 data-src 则直接跳过(性能优化);
  2. 判断元素底部是否出现在视口中,出现则显示;
  3. 判断元素顶部是否出现在视口中,出现则显示;
 document.addEventListener('DOMContentLoaded', function() {
  const imgs = document.querySelectorAll('.lazy')

  function lazyLoad() {
    const windowHeight = document.documentElement.clientHeight
    imgs.forEach(($img, i) => {
      // 重点是下面这个判断
      if ($img.dataset.src && $img.getBoundingClientRect().bottom >= 0 && windowHeight > $img.getBoundingClientRect().top) {
        $img.src = $img.dataset.src
        delete $img.dataset.src
      }
    })
  }

  lazyLoad()
  document.addEventListener('scroll', debounce(lazyLoad, 200))
})

function debounce(func, wait) {
  let timer = null

  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func(...args)
    }, wait)
  }
}

感谢阅读,欢迎关注我的公众号 云影sky,带你解读前端技术。关注公众号可以拉你进讨论群,有任何问题都会回复。

公众号