颤动的网络图像显示加载指示器 - TypeScript

当我们在网页中加载图像时，如果没有及时显示加载指示器，用户可能会感到不耐烦。为了解决这个问题，可以使用颤动的网络图像加载指示器。这是一个使用 TypeScript 编写的示例，可以在你的网页中引用。

首先，我们需要创建一个 ShakingImageLoader 类，它将负责处理图像加载和显示指示器：

class ShakingImageLoader {
  private readonly loader: HTMLElement;
  private readonly image: HTMLImageElement;

  constructor(loader: HTMLElement, image: HTMLImageElement) {
    this.loader = loader;
    this.image = image;

    this.image.addEventListener("load", this.onImageLoad);
    this.image.addEventListener("error", this.onImageError);
  }

  private onImageLoad = (): void => {
    this.hideLoader();
    this.showImage();
  };

  private onImageError = (): void => {
    this.hideLoader();
  };

  private hideLoader(): void {
    this.loader.classList.remove("loading");
  }

  private showImage(): void {
    this.image.classList.add("loaded");
  }
}

在构造函数中，我们将加载指示器和图像作为参数传入。然后，我们添加 load 和 error 事件的监听器。当图像成功加载时，我们将隐藏加载指示器并显示图像。如果出错，我们将隐藏加载指示器。

为了使加载指示器颤动，我们需要使用 CSS 动画。这里是一个示例：

.loader {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  from {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(10px);
  }
}

最后，我们需要在页面中引用 loader 和图像，并实例化 ShakingImageLoader ：

<div class="loader"></div>
<img src="image.jpg" class="image" />

<script>
  const loader = document.querySelector(".loader") as HTMLElement;
  const image = document.querySelector(".image") as HTMLImageElement;
  new ShakingImageLoader(loader, image);
</script>

这个示例将创建一个图像加载器，加载图像并显示加载指示器。如果图像加载成功，则会显示图像，否则将隐藏加载指示器。

这是一个简单但有趣的加载指示器，适用于任何网页中需要加载图像的场合。

以上是本人使用 TypeScript 编写的颤动的网络图像显示加载指示器。