IntersectionObserver 实现图片懒加载与有限滚动

背景

​ 图片懒加载和滚动加载数据的需要始终存在，比拟常见的办法是监听页面或者容器的滚动事件，实时计算节点与容器边界的关系，以实现不同的加载逻辑。通常会应用 EventListener 来绑定监听事件，同时借助 Element.getBoundingClientRect() 来获取相干元素的边界信息，而后两者都是在主线程运行，会占用肯定的资源和性能，因而频繁触发事件和调用办法可能会造成性能问题，这种检测办法极其怪异且不优雅。Intersection Observer API 提供了一种异步检测指标元素与先人元素或 viewport 相交区域大小变动的办法，它会注册一个回调函数，当监听的两个元素的相交区域大小发生变化时（包含被监督的元素进入或者退出另外一个元素时），该回调办法会被触发执行。这样主线程将不用浪费资源监听滚动和实时计算，浏览器会自行优化元素相交治理。

Intersection Observer API 简介

​ 创立一个 Intersection Observer 实例并增加监听对象：

const el = documen.querySelector('#target') // 被监听的元素
const observer = new IntersectionObserver(callback, options) // 创立实例
observer.observe(el) // 开始监听元素

​ 其中 callback 为必须配置的回调函数，options用于配置 observer 实例的监听环境，observe()办法用于注册监听。MDN 文档

Intersection observer options

​ 如果没有指定 options，observer 实例会应用以后 viewport 作为 root，没有 margin，阈值为 0，意味着即便一像素的扭转都会触发回调函数。可配置的参数（节自 MDN）如下：

​ root

​ 指定根 (root) 元素，用于查看指标的可见性。必须是指标元素的父级元素。如果未指定或者为null，则默认为浏览器视窗

​ rootMargin

​ 根 (root) 元素的外边距。相似于 CSS 中的 margin属性，比方 “10px 20px 30px 40px" (top, right, bottom, left)。如果有指定 root 参数，则 rootMargin 也能够应用百分比来取值。该属性值是用作 root 元素和 target 产生交加时候的计算交加的区域范畴，应用该属性能够管制 root 元素每一边的膨胀或者扩张。默认值为 0

​ threshold

​ 能够是繁多的 number 也能够是 number 数组，target 元素和 root 元素相交水平达到该值的时候 IntersectionObserver 注册的回调函数将会被执行。如果你只是想要探测当 target 元素的在 root 元素中的可见性超过 50% 的时候，你能够指定该属性值为 0.5。如果你想要 target 元素在 root 元素的可见水平每多 25% 就执行一次回调，那么你能够指定一个数组 [0, 0.25, 0.5, 0.75, 1]，默认值是 0。该值为 1.0 含意是当 target 齐全呈现在 root 元素中时候 回调才会被执行。

Intersection observer callback

​ 回调函数当以下状况产生时会被调用：

1. Observer 第一次监听指标元素时（observe()办法执行时）
2. 每当指标 (target) 元素与设施视窗或者其余指定元素 (root) 产生交加时（当元素可见比例超过指定阈值后）

​ 回调函数调用时会接管两个参数：

​ entries：一个 IntersectionObserverEntry 对象的 数组

​ observer：被调用的 IntersectionObserver 实例

IntersectionObserverEntry

​ IntersectionObserverEntry形容了指标元素与其根元素容器在某一特定过渡时刻的穿插状态. IntersectionObserverEntry 的实例作为 entries 参数被传递到一个 IntersectionObserver 实例的回调函数中，它领有以下只读属性：

​ boundingClientRect：返回蕴含指标元素的边界信息的DOMRectReadOnly. 边界的计算形式与 Element.getBoundingClientRect() 雷同

​ intersectionRatio：返回intersectionRect 与 boundingClientRect 的比例值，范畴为 0~1

​ intersectionRect：返回一个 DOMRectReadOnly 用来形容根和指标元素的相交区域

​ isIntersecting：返回一个布尔值，形容指标元素是否与根元素有相交区域

​ rootBounds：返回一个 DOMRectReadOnly 用来形容穿插区域观察者 (intersection observer) 中的根元素

​ target：与根呈现相交区域扭转的元素 (Element)

​ time：返回一个记录从 IntersectionObserver 的工夫原点 (time origin) 到穿插被触发的工夫的工夫戳(DOMHighResTimeStamp)

IntersectionObserver

​ IntersectionObserver 领有以下办法：

​ disconnect()：进行实例的所有监听

​ observe()：开始监听

​ takeRecords()：返回所有察看指标的 IntersectionObserverEntry 对象数组

​ unobserve()：进行监听特定元素

Intersection Observer API 实战

图片懒加载

​ 在咱们拜访一个图片展现比拟多的网页时，加载速度慢很多时候正是因为图片多导致，大量的 img 图片导致页面渲染的梗塞。当费了许多力量把全副图片和页面加载进去时而用户早已离去。另一方面，若用户只查看了网页的后面局部便来到，许多曾经加载却因为处于网页底部而未出现在视口区的图片，它们极大减轻服务器压力了然而用户看都没看，白白浪费了性能。为了解决下面的问题须要引入图片懒加载，懒加载其实很好了解，重点就是一个‘懒 ’ 字。当用户滚动相应可视区域，若可视区域有图片便加载，而在可视区域外未加载过的图片它们先不加载，如果用户滚动可视区域到它们时它们再加载，否则一律不加载。这样一来就大大提高了网页渲染的性能和缩小不必要的节约。

​ 有了 Intersection Observer API 之后，咱们能够很容易实现图片的懒加载。此示例应用原生 HTML+JavaScript 实现，大抵思路如下：

1. 图片占位：此处咱们应用 HTML5 的 dataset 属性，将实在的图片地址赋值给 data-src 属性

   <img data-src="../static/imgs/img-1.png" src="../static/imgs/loading.png">

2. 创立 Intersection Observer 实例并配置回调函数

   const observer = new IntersectionObserver(entries => {for (const i of entries) {if (i.isIntersecting) { // 当指标元素呈现在视图内
               const img = i.target;
               const trueSrc = img.getAttribute("data-src");
               setTimeout(() => {img.setAttribute("src", trueSrc); // 不便展现懒加载成果
               }, 1500); 
               observer.unobserve(img); // 进行监听此元素
           }
       }
     });

   在初始化实例的时候能够应用箭头函数间接绑定回调函数，在回调函数内，咱们设置好图片的实在地址后应该进行监听此图片，以防止不必要的解决。

3. 监听所有 img 元素

   const images = document.getElementsByTagName("img");
   for (const i of images) {observer.observe(i);
   }

​ 须要留神，设置监听应在页面构造渲染完结后，即脚本应在 window.onload 时执行，因为在调用 observer.observe() 时，回调函数会执行一次，此时元素未初始化，高度为 0，if语句内的脚本会执行。如果无奈监听 window.onload 事件，能够给元素设置根底的宽高，保障初始化脚本时只有局部元素在视图内。实际效果如下方 gif 图：

​ 能够看到刷新页面后，首次只加载了呈现在视图内的三至四张图片，随着页面的滚动，呈现的 img 标签 src 属性被批改为实在的图片地址。

有限滚动

​ 内容有限滚动其实就是当用户滚动到靠近内容底部时被动加载新的数据，而无需用户操作翻页，给用户一种网页能够有限滚动的错觉。这里提供两种实现思路，都是在 Intersection Observer 的回调函数内做相干的判断和操作，能够自行尝试实现：

1. 存储图片信息列表，在回调函数内判断如果以后元素是列表的最初一项，则触发加载下一页的数据，新加载的数据与原来的列表合并即可，加载数据后要监听新附加的元素
2. 页面退出页尾栏（又称 sentinels），一旦页尾栏可见，就示意用户达到了页面底部，从而加载新的数据放在页尾栏后面

​ 下图为有限加载示例，应用 Unsplash 的 API，每次会加载若干张随机的图片：