TypeScript 如何在TypeScript中使用Image的onload事件

在本文中，我们将介绍如何在 TypeScript 中使用 Image 的 onload 事件。Image 对象是 HTML 中用于加载图片的标签，通过使用 onload 事件，我们可以在图片加载完成后执行相应的操作。

Image 对象与 onload 事件

在 TypeScript 中，可以使用 Image 对象来加载和处理图片。Image 对象的 onload 事件在图片加载完成后触发，可以用来执行一些与图片相关的操作，比如显示图片、更新图片的样式或执行其他自定义的逻辑。

下面是使用 Image 对象和 onload 事件的示例代码：

const img = new Image();
img.src = "path/to/image.jpg";

img.onload = () => {
  // 图片加载完成后执行的逻辑
  console.log("图片加载完成");

  // 可以在这里显示图片到页面上
  const container = document.getElementById("image-container");
  container.appendChild(img);
};

在上面的代码中，我们首先创建了一个新的 Image 对象，并通过设置其 src 属性来指定要加载的图片路径。接下来，我们使用 onload 事件来监听图片加载完成的事件。在事件处理函数中，我们可以执行我们想要的操作，比如在控制台输出一条消息，或者将图片显示在页面上。

使用 onload 事件加载多张图片

在实际应用中，我们可能需要加载多张图片，并在所有图片都加载完成后执行操作。在 TypeScript 中，可以使用 Promise 与 onload 事件结合来实现此目的。

下面是一个加载多张图片并在所有图片加载完成后执行操作的示例代码：

function loadImage(url: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = url;
  });
}

Promise.all([
  loadImage("path/to/image1.jpg"),
  loadImage("path/to/image2.jpg"),
  loadImage("path/to/image3.jpg"),
])
  .then((images) => {
    // 所有图片加载完成后执行的操作
    console.log("所有图片加载完成");

    // 可以在这里处理图片数组，比如将它们显示在页面上
    const container = document.getElementById("image-container");
    images.forEach((img) => {
      container.appendChild(img);
    });
  })
  .catch((error) => {
    console.error("图片加载失败: ", error);
  });

在上述代码中，我们定义了一个 loadImage 函数，该函数返回一个 Promise。在 loadImage 函数内部，我们创建了一个新的 Image 对象，并通过设置 src 属性来指定要加载的图片路径。同时，我们在 onload 事件中调用 resolve 函数，表示图片加载完成。如果加载过程中发生错误，我们调用 reject 函数，表示加载失败。

接下来，我们创建了多个 loadImage 函数的调用，并将它们传入 Promise.all 方法中。Promise.all 方法返回一个新的 Promise，当所有图片加载完成后，该 Promise 被 resolve，并将加载完成的图片数组作为结果返回。我们可以通过调用 then 方法来监听 Promise 的 resolve，然后执行相应的操作，并使用 catch 方法来捕获任何加载失败的情况。