在前端开发中，图片 placeholder 是一个非常常见的需求。它可以让页面先展示一个占位图，等到真正的图片加载成功后再替换掉占位图，这样可以提高用户体验，避免页面空白。本文将介绍如何使用 Custom Elements 来实现图片 placeholder。
Custom Elements 概述
Custom Elements 是 Web Components 标准的一部分，它允许开发者自定义 HTML 元素并在页面中使用。一个 Custom Element 由三部分组成：
- 自定义元素的名称，必须包含连字符，例如
my-element。 - 元素的定义，包括样式、行为和事件等。
- 元素的使用，可以在 HTML 中像普通元素一样使用。
Custom Elements 的优点在于它可以提供一种组件化的开发方式，让开发者可以封装自己的组件，方便复用和维护。
实现图片 placeholder 的 Custom Element
下面我们将使用 Custom Elements 来实现一个图片 placeholder 的组件。首先，我们需要定义一个自定义元素 image-placeholder：
-- -------------------- ---- -------
--------- --------------------------------
-------
----- -
-------- ------
------ -----
------- -----
----------------- --------
-
--------
-----------
--------
----- ---------------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------------------
----- --------------- - -----------------
----- ---------- - ------------------------ ---------
--------------------------------------------------------
-
-
------------------------------------------ ------------------
---------在上面的代码中，我们首先定义了一个 <template> 元素，用于保存组件的模板。模板中包含了一个样式和一个占位背景色。接着，我们定义了一个 ImagePlaceholder 类，继承自 HTMLElement，并实现了 constructor 方法。在 constructor 方法中，我们首先获取 <template> 元素的内容，然后将其添加到 Shadow DOM 中。最后，我们使用 customElements.define 方法将 ImagePlaceholder 类注册为一个自定义元素。
现在，我们可以在 HTML 中使用 image-placeholder 元素了：
<image-placeholder></image-placeholder>
这样就可以展示一个占位图了。接下来，我们需要在组件中添加一个图片元素，并在图片加载成功后替换掉占位图。修改 ImagePlaceholder 类的代码如下：
-- -------------------- ---- -------
--------- --------------------------------
-------
----- -
-------- ------
------ -----
------- -----
----------------- --------
-
--- -
-------- -----
------ -----
------- -----
-
--------
-----------
--------
----- ---------------- ------- ----------- -
------------- -
--------
----- -------- - ------------------------------------------------------
----- --------------- - -----------------
----- ---------- - ------------------------ ---------
--------------------------------------------------------
----- --- - ------------------------------
---------- - -- -- -
----------------- - --------
--
------- - -------------------------
----------------------------
-
-
------------------------------------------ ------------------
---------在上面的代码中，我们首先在模板中添加了一个 <img> 元素，用于展示真正的图片。在样式中，我们将其隐藏了。接着，在 constructor 方法中，我们创建了一个 <img> 元素，并设置了它的 onload 事件。在事件处理函数中，我们将图片的 display 属性设置为 block，这样就可以替换掉占位图了。最后，我们根据组件的 src 属性设置了图片的 src 属性，并将其添加到 Shadow DOM 中。
现在，我们就可以在 HTML 中使用带有 src 属性的 image-placeholder 元素了：
<image-placeholder src="https://picsum.photos/200"></image-placeholder>
这样就可以展示一张真正的图片了。
总结
本文介绍了如何使用 Custom Elements 来实现图片 placeholder。通过自定义元素、模板和 Shadow DOM，我们可以快速地创建一个可复用的组件，并提高页面的用户体验。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f0d0bd2b3ccec22f9b6990