如何利用 Custom Elements 实现图片懒加载-JavaScript中文网-JavaScript教程资源分享门户

懒加载是现代网站以提高性能和用户体验的一种方式。许多前端框架和库都提供了懒加载的实现方式，但使用 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>

// javascriptcn.com 代码示例
class LazyImage extends HTMLElement {
  constructor() {
    super();

    const observer = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        this.loadImage();
        observer.unobserve(this);
      }
    });

    observer.observe(this);
  }

  loadImage() {
    const img = new Image();
    img.src = this.getAttribute('src');
    img.alt = this.getAttribute('alt');

    img.onload = () => {
      this.appendChild(img);
    }
  }
}

customElements.define('lazy-image', LazyImage);

在上述代码中，我们创建了一个 LazyImage 类，继承自 HTMLElement。在 constructor 中，我们创建了一个 Intersection Observer 监听器，监听自定义元素与视窗的交叉状态。当自定义元素进入视窗，监听器触发，调用 loadImage 方法加载图片，并取消监听器。

loadImage 方法会创建一个新的 img 元素，并设置 src 和 alt 属性。当图片加载成功后，它会被添加到自定义元素中。

我们使用 customElements.define 方法将 LazyImage 类注册为 lazy-image 标签名。

示例

下面是一个简单的示例，演示如何实现懒加载图片。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Lazy Loading Images with Custom Elements</title>
  <style>
    .lazy-image {
      height: 300px;
      margin-bottom: 20px;
      background-color: #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      color: #000;
    }
  </style>
</head>
<body>
  <lazy-image src="https://picsum.photos/id/1/400/300" alt="Sunrise"></lazy-image>
  <lazy-image src="https://picsum.photos/id/2/400/300" alt="Mountain"></lazy-image>
  <lazy-image src="https://picsum.photos/id/3/400/300" alt="Ocean"></lazy-image>

  <script>
    class LazyImage extends HTMLElement {
      constructor() {
        super();

        const observer = new IntersectionObserver(entries => {
          if (entries[0].isIntersecting) {
            this.loadImage();
            observer.unobserve(this);
          }
        });

        observer.observe(this);
      }

      loadImage() {
        const img = new Image();
        img.src = this.getAttribute('src');
        img.alt = this.getAttribute('alt');

        img.onload = () => {
          this.appendChild(img);
        }
      }
    }

    customElements.define('lazy-image', LazyImage);
  </script>
</body>
</html>

在上述代码中，我们定义了三个 lazy-image 元素，并指定不同的图片链接和替代文本。在浏览器视窗中滚动，可以看到图片在进入视窗时被加载。

总结

Custom Elements 和 Intersection Observer API 为我们提供了一种原生的方法来实现懒加载图片。通过自定义元素，我们可以将一张待加载的图片封装到一个组件中，并实现交叉观察来决定何时加载图片。这种方法不需要任何第三方库，适用于现代浏览器。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6532c77b7d4982a6eb5b707b