Get best of the week

使用Intersection Observer API的延迟加载

朋友们，美好的一天！

在本文中，我们将介绍Intersection Observer API，这是一个用于在页面上延迟加载图像和其他元素的新功能强大的工具，所有现代浏览器均支持该工具。我们可以使用此工具通过定义DOM内容的预加载或延迟加载来控制元素的可见性。

随着Web的发展，浏览器支持越来越多的新功能和API，但仍会给开发人员带来伤害-DOM渲染。当我们开始开发新应用程序，创建组件，考虑HTML结构，使用CSS的样式元素时，我们还考虑了渲染过程，页面的总体外观以及其他一些需要仔细处理并影响的重要事项应用程序渲染。

反过来，这会影响我们如何创建元素，如何组织CSS，将在项目中使用哪些库和框架，等等。这就是为什么渲染对开发人员如此重要的原因。

React库在开发人员社区中流行的原因之一是它使用虚拟DOM。本质上，这是真实DOM的虚拟表示形式，您可以根据需要进行控制。在所有更新之后，虚拟DOM决定需要对原始DOM进行哪些更改，并以“无缝”方式进行这些更改；更改一个元素时无需刷新整个页面。这是React与其他库和框架相比最显着的优势之一。 DOM渲染是一项昂贵的（就性能而言）的任务，React可以很好地完成而不会出现任何问题。

一些库和API使我们能够改善应用程序元素的呈现。我们将熟悉其中之一-Intersection Observer API。但是首先，让我们弄清楚什么是“惰性”图像加载。

延迟加载图像如何工作？


延迟加载是呈现页面内容的技术之一。 “延迟”加载的概念是，不是完全加载页面，而是仅加载必要的部分，并推迟（延迟）其余部分的加载，直到用户需要它们为止。

您可能听说或已经遇到的“懒惰”下载示例是页面的无休止滚动。它的工作方式如下：用户访问页面，加载初始内容，并且只有在用户向下滚动页面到最后时，才加载内容的下一部分。在这种情况下，无需一次下载所有内容，极大地简化了应用程序。

如果“懒惰”下载仅用于下载“用户生成的”内容，那么相反的技术叫什么？有些人以前听说过延迟加载，但没有听说过相反的情况。 “惰性”加载的反义词是“精力充沛”的加载（其他选项是急躁的，快速移动的）-当立​​即渲染所有内容时。

您是否知道用于延迟加载图像的HTML属性？要使用它们，只需在“ img”或“ iframe”元素中添加loading =“ lazy”。



使用这种技术，我们有很多优点：仅加载必要的资源可以减少内存消耗，并最终减少页面加载时间。它还可以防止呈现“无人认领”的代码，从而优化应用程序以在低网络带宽条件下工作。但是，存在一些缺点：这可能会影响搜索引擎对页面的排名。此外，选择正确的库或API需要花费一些时间。

交叉口观察者API


JavaScript的发展如此之快，几乎每年我们都会获得一个新的API。新API的主要目标是帮助创建出色的应用程序和页面。

Intersection Observer是一个API，可让您监视DOM元素的可见性和位置。事实是，它是异步工​​作的，使您可以平滑地（不可察觉地）更改元素的可见性，从而确定对DOM内容的初步或延迟加载。



几年前，我们还没有用于定位和跟踪元素的API或其他工具。我们不得不编写疯狂而庞大的函数，创建昂贵（在性能方面）的方法，从而产生更多的问题。使用Intersection Observer API，我们可以做一些很酷的事情，例如：

  • 无限滚动页面-创建表格，列表，网格容器等的无限滚动。这从未如此简单。
  • 图片-当您可以使用“延迟”下载并仅显示用户当前所需的内容时，为什么要一次上传所有图片？
  • 监视元素-您可以监视页面上的元素。例如，您可能会收到有关关闭广告的消息。

这就是一切的开始：

let myFirstObserver = new IntersectionObserver(callback, options)

我们初始化IntersectionObserver构造函数并将两个参数传递给它。第一个参数是回调函数，响应于我们的元素与视口（即，当元素超出视口的边界时）或与另一个元素的交集而调用。options参数是一个对象，用于控制启动回调函数的条件。该对象具有以下字段：

  • root-用作目标元素视口的父元素（对于我们正在观察的元素）
  • rootMargin-根元素周围的外边距（此字段的值类似于CSS中的边距值）。在提交相交之前，这些值可以针对根的每一侧更改。
  • 阈值-一个数字或数字数组，用于确定目标元素与根元素的交集百分比，在该百分比处启动回调函数



让我们看一下使用Intersection Observer API的方法：

let options = {
    root: document.querySelector('.scroll-list'),
    rootMargin: '5px',
    threshold: 0.5
}

let myFirstObserver = new IntersectionObserver(elements => { elements.forEach(element => console.log('element', element)) }, options)

为了开始“监视”元素，您需要确定目标并使用“ observe”方法调用观察者，并将目标作为参数传递：

let myDivTarget = document.querySelector('.header')

observer.observe(myDivTarget)

应当记住，观察者观察到的所有元素都是矩形。不规则形状的元素适合最小的矩形。

浏览器支持如何？所有现代浏览器（例如Chrome，Edge，Firefox和Opera）都支持Intersection Observer API。



如果您打算处理大量数据，例如，处理包含大量信息的表，则Intersection Observer API对您将非常有用。

该API的优点之一是，解决此类问题不再需要使用任何库。

结论


我们研究了Intersection Observer API及其在延迟加载，观察DOM元素位置等方面的用途。浏览器支持越来越多的API，这些API减少了页面呈现时间，主要是针对连接速度较慢的用户，从而减小了项目的大小并仅显示相关内容。

从翻译者那里：在我看来，这篇文章内容不足，因此，这里有其他文献的链接：


感谢您的关注。

More articles:


All Articles