图片加载完成后如何执行后续代码？-html教程-PHP中文网

图片加载完成后如何执行后续代码？

碧海醫心

发布： 2025-02-19 20:34:00

原创

300人浏览过

图片加载完成后执行后续代码的两种方法：计时器和async/await

本文介绍两种方法，确保在所有图片加载完成后再执行后续代码。第一种方法使用计时器轮询图片加载状态；第二种方法利用async/await处理异步操作，使代码更简洁易读。

图片加载完成后如何执行后续代码？

方法一：使用计时器

此方法通过计时器定期检查图片是否加载完成。我们需要一个计数器 img_number 追踪未加载图片的数量。每张图片的 onload 事件触发后，计数器减一。当计数器为零时，所有图片加载完成，执行后续代码。这种方法简单易懂，但效率相对较低，因为需要不断轮询。

方法二：使用async/await

async/await 提供更优雅的异步操作处理方式。 img.onload 事件处理程序内使用Promise，await 关键字暂停执行，直到图片加载完成（Promise resolve）。所有图片加载完成后，await 释放执行权，执行后续代码。这种方法更简洁，也更符合现代JavaScript的异步编程范式。

以下是一个使用async/await的代码示例，假设answer_img是一个包含图片对象的数组：

async function draw() {
  let img_height = 0;
  let answer_height = 0;

  if (answer_img.length > 0) {
    const loadPromises = answer_img.map(imgObj => {
      return new Promise((resolve) => {
        const img = new Image();
        img.src = imgObj.src;
        img.onload = () => {
          img_height += img.height;
          answer_height += img.height;
          resolve();
        };
      });
    });
    await Promise.all(loadPromises); // 等待所有图片加载完成
  }

  // 所有图片加载完成后执行的代码
  // 现在可以使用 img_height 和 answer_height
  console.log("All images loaded. Total height:", img_height);
  // ... your code here ...
  return {img_height, answer_height}; // 返回图片高度信息
}

draw().then((result) => {
  // 获取draw函数返回的图片高度信息
  console.log("Image height from draw function:", result.img_height);
});

登录后复制

这个例子中，draw 函数返回一个 Promise，包含最终的图片高度信息。外部使用 .then() 方法获取结果。选择哪种方法取决于项目需求和个人偏好，但对于更复杂的异步操作，async/await 通常是更好的选择。

以上就是图片加载完成后如何执行后续代码？的详细内容，更多请关注php中文网其它相关文章！