图片加载完成后执行后续代码的两种方法：计时器和async/await
本文介绍两种方法，确保在所有图片加载完成后再执行后续代码。第一种方法使用计时器轮询图片加载状态；第二种方法利用async/await处理异步操作，使代码更简洁易读。
方法一：使用计时器
此方法通过计时器定期检查图片是否加载完成。 我们需要一个计数器 img_number 追踪未加载图片的数量。每张图片的 onload 事件触发后，计数器减一。当计数器为零时，所有图片加载完成，执行后续代码。这种方法简单易懂，但效率相对较低，因为需要不断轮询。
方法二：使用async/await
拍客竞拍系统是一款免费竞拍网站建设软件，任何个人可以下载使用，但未经商业授权不能进行商业活动，程序源代码开源，任何个人和企业可以进行二次开发，但不能以出售和盈利为目的。安装方法，将www文件夹里面的所有文件上传至虚拟主机，在浏览器执行http://你的域名/install.php或者直接导入数据库文件执行。本次升级优化了一下内容1，程序和模板完美分离。2，优化了安装文件。3，后台增加模板切换功能。
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 通常是更好的选择。
