Image属性complete在实际渲染图像之前返回true

Image property complete returns true before image is actually rendered

本文关键字：图像返回 true complete 属性 Image 更新时间：2023-09-26

我正在尝试用填充色覆盖未加载的图像容器，直到图像完全加载。然后我显示图像和覆盖文本。

但在慢速连接（我使用网络链接调节器来模拟）时，我会得到不想要的效果。图像属性"complete"返回true，并在图像实际呈现在屏幕上之前设置图像的宽度和高度。

为什么会这样？为什么图像被认为是加载的，即使它需要额外的10秒才能完全渲染？

这在Firefox、Chrome和Safari中都会发生。

使用像一样加载的DOMContent

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

这将在您的图像完全渲染后执行

请参阅此处