图片加载完成后执行后续代码的两种方法：计时器和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 通常是更好的选择。
以上就是图片加载完成后如何执行后续代码？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2798798.html
