图片加载完成后执行后续代码的两种方法：计时器和async/await
本文介绍两种方法，确保在所有图片加载完成后再执行后续代码。第一种方法使用计时器轮询图片加载状态；第二种方法利用async/await处理异步操作，使代码更简洁易读。
方法一：使用计时器
此方法通过计时器定期检查图片是否加载完成。 我们需要一个计数器 img_number 追踪未加载图片的数量。每张图片的 onload 事件触发后，计数器减一。当计数器为零时，所有图片加载完成，执行后续代码。这种方法简单易懂，但效率相对较低，因为需要不断轮询。
方法二：使用async/await
async/await 提供更优雅的异步操作处理方式。 img.onload 事件处理程序内使用Promise，await 关键字暂停执行，直到图片加载完成（Promise resolve）。所有图片加载完成后，await 释放执行权，执行后续代码。这种方法更简洁，也更符合现代JavaScript的异步编程范式。
以下是一个使用async/await的代码示例，假设answer_img是一个包含图片对象的数组：
<code class="javascript">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);
});</code>
这个例子中，draw 函数返回一个 Promise，包含最终的图片高度信息。 外部使用 .then() 方法获取结果。 选择哪种方法取决于项目需求和个人偏好，但对于更复杂的异步操作，async/await 通常是更好的选择。
