在前端开发中，图片的懒加载是一种非常实用的技术。它可以减少网站的加载时间和带宽占用，提高用户的交互体验。要实现图片的懒加载，目前有很多的方案，其中较为流行的是使用 Intersection Observer API 或者 scroll 事件监听。
但是，这些方案在使用时需要写大量的 JavaScript 代码，不利于代码的可维护性和扩展性。而 Custom Elements 则是一种更为优雅的解决方案，它可以实现自定义 HTML 标签，并且自带懒加载功能，我们只需要写少量的 JavaScript 代码即可实现图片的懒加载。
Custom Elements
Custom Elements 是 Web Components 规范的一部分，它允许我们创建自定义 HTML 元素，并且可以在其中定义自己的行为和样式。与常规的 HTML 元素不同，Custom Elements 是由 JavaScript 代码创建的，因此可以非常灵活地定义和修改它们的行为和样式。
创建一个 Custom Element 的基本步骤如下：
继承自 HTMLElement 类。这个类是浏览器自带的，是所有 HTML 元素的基类。
实现 customElements.define 方法，将自定义标签和类名关联起来。
在 connectedCallback 方法中定义元素渲染的内容和行为。
实现懒加载图片
在 Custom Elements 中实现图片的懒加载，我们需要做以下几个步骤：
创建一个自定义标签，例如 lazy-img。
在 connectedCallback 方法中定义图片的加载行为。这里我们使用 Intersection Observer API 来实现图片的懒加载。当元素进入可视区域时，通过修改图片的 src 属性来实现图片的加载。
在 HTML 中使用自定义标签来替代 img 标签。当页面加载时，所有的 lazy-img 标签都只会显示一个默认的 loading 图片，而不会加载原始图片。当元素进入可视区域时，它们才会按照预期显示图片。
下面是一个实现懒加载图片的例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ---- ------ ---- ------ ----------------
-------
-------- --- -
------ -----
------- -----
-------- ------
------- -----
----------- -----
-
--------
--------
----- ------- ------- ----------- -
----------- -- -
--------
----- ------------- - --- ------------------------------ --------- -- -
--------------------- -- -
-- ---------------------- -
----- --- - ----------------------------------
----- --- - -----------------------------
----------------------- -----
-----------------------------
-
---
---
----------------------------
-
----------------- -- -
-------------- - ----- ----------- - ------------------------ - -- ----
-
-
--------------------------------- ---------
---------
-------
------
--------- -------------------------------------------------
--------- -------------------------------------------------
--------- -------------------------------------------------
--------- --------------------------------------------------
-------
-------总结
利用 Custom Elements 实现懒加载图片是一种简单、灵活、可维护的方法。它可以让我们少写大量的 JavaScript 代码，并且相对于 scroll 事件监听和 Intersection Observer API，它的语法更为简洁明了。
因此，在实现懒加载图片时，我们可以使用 Custom Elements 来实现。同时，Custom Elements 还可以应用于许多其他的场景，例如自定义表单元素、自定义列表元素等等。它是一种非常强大且有前途的技术，值得我们深入研究和学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64532a85968c7c53b079d667