如何解决img.onload事件优先导致JavaScript函数draw()中高度计算错误的问题？-html教程-PHP中文网

如何解决img.onload事件优先导致JavaScript函数draw()中高度计算错误的问题？

DDD

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

原创

1052人浏览过

解决img.onload事件优先级导致javascript函数draw()中高度计算错误的问题

图片加载完成事件img.onload的异步特性可能导致draw()函数中高度计算错误。下文提供两种解决方法，确保图片加载完成后再进行高度计算。

如何解决img.onload事件优先导致JavaScript函数draw()中高度计算错误的问题？

方法一：使用setTimeout()延迟执行

在draw()函数的for循环结束后，使用setTimeout()函数延迟div高度的设置。这能确保图片加载完成之后再执行高度计算和赋值。延迟时间需根据网络情况和图片大小进行调整，建议设置为大于图片加载时间的数值，例如100毫秒：

<code class="javascript">setTimeout(() => {
  // 创建 div 并分配总高度
  // 将计算后的高度赋值给 div
  // 返回这个 div
}, 100);</code>

登录后复制

方法二：使用async/await实现同步等待

算家云

高效、便捷的人工智能算力服务平台

查看详情

立即学习“Java免费学习笔记（深入）”；

将draw()函数声明为异步函数，并使用await关键字等待img.onload事件完成：

<code class="javascript">async function draw() {
  // ...你的 for 循环逻辑 ...

  if (answer_img.length === 1) {
    let img = new Image();
    img.src = answer_img[0].src;

    await new Promise((resolve) => {
      img.onload = function () {
        // ...你的 img.onload 处理逻辑 ...
        resolve(); // 通知 Promise 完成
      };
    });

    // ...其余的 draw() 逻辑 ...  在 await 后面进行高度计算和赋值
  }

  // 返回 div
  return div;
}</code>

登录后复制

async/await方法更优雅地处理异步操作，使代码更易读且更易于维护。选择哪种方法取决于项目的复杂性和个人偏好，但async/await通常被认为是更现代和更可维护的解决方案。记住在await之后进行高度的计算和赋值，确保使用了图片加载后的实际高度。

以上就是如何解决img.onload事件优先导致JavaScript函数draw()中高度计算错误的问题？的详细内容，更多请关注php中文网其它相关文章！