懒加载是现代网站以提高性能和用户体验的一种方式。许多前端框架和库都提供了懒加载的实现方式，但使用 Custom Elements 是一种原生的方法，没有依赖任何第三方库。
在这篇文章中，我们将学习如何使用 Custom Elements 和 Intersection Observer API 实现图片懒加载。
Custom Elements 介绍
Custom Elements 是一个 Web Component 规范的一部分，允许开发者定义和注册自定义 HTML 元素，以达到组件式开发的目的。
自定义元素可以是内置元素（如 div、button、span）的扩展，也可以是全新自定义元素。一个自定义元素有自己的生命周期和行为，并且可被 JavaScript 修改、操作和控制。
Intersection Observer API 介绍
Intersection Observer API 是一种现代的浏览器 API，用于观察一个元素与其祖先元素或顶级文档视窗（viewport）的交叉状态。
这个 API 非常适合懒加载图片，因为它可以告诉我们元素与视窗的相交程度，从而判断该元素是否在视窗内，以选择是否加载图片。
实现懒加载
首先，我们需要定义一个自定义元素，该元素包含一张待加载的图片，并添加 Intersection Observer 监听器。
<lazy-image src="img.jpg" alt="lazy image"></lazy-image>
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - --- ---------------------------- -- -
-- --------------------------- -
-----------------
-------------------------
-
---
-----------------------
-
----------- -
----- --- - --- --------
------- - -------------------------
------- - -------------------------
---------- - -- -- -
----------------------
-
-
-
----------------------------------- -----------在上述代码中，我们创建了一个 LazyImage 类，继承自 HTMLElement。在 constructor 中，我们创建了一个 Intersection Observer 监听器，监听自定义元素与视窗的交叉状态。当自定义元素进入视窗，监听器触发，调用 loadImage 方法加载图片，并取消监听器。
loadImage 方法会创建一个新的 img 元素，并设置 src 和 alt 属性。当图片加载成功后，它会被添加到自定义元素中。
我们使用 customElements.define 方法将 LazyImage 类注册为 lazy-image 标签名。
示例
下面是一个简单的示例，演示如何实现懒加载图片。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------- ------- ------ ---- ------ ----------------
-------
----------- -
------- ------
-------------- -----
----------------- -----
-------- -----
---------------- -------
------------ -------
---------- -----
------ -----
-
--------
-------
------
----------- ---------------------------------------- ---------------------------
----------- ---------------------------------------- ----------------------------
----------- ---------------------------------------- -------------------------
--------
----- --------- ------- ----------- -
------------- -
--------
----- -------- - --- ---------------------------- -- -
-- --------------------------- -
-----------------
-------------------------
-
---
-----------------------
-
----------- -
----- --- - --- --------
------- - -------------------------
------- - -------------------------
---------- - -- -- -
----------------------
-
-
-
----------------------------------- -----------
---------
-------
-------在上述代码中，我们定义了三个 lazy-image 元素，并指定不同的图片链接和替代文本。在浏览器视窗中滚动，可以看到图片在进入视窗时被加载。
总结
Custom Elements 和 Intersection Observer API 为我们提供了一种原生的方法来实现懒加载图片。通过自定义元素，我们可以将一张待加载的图片封装到一个组件中，并实现交叉观察来决定何时加载图片。这种方法不需要任何第三方库，适用于现代浏览器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6532c77b7d4982a6eb5b707b