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

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

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

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

---

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

像使用DOMContentloaded一样使用DOMContentloaded

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

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

---

请参阅

我看到了一些问题。1） 这将适用于所有图像，而不是每张图像？因此，如果一个图像真的很重，那么其他图像将不得不等待？2） ajax请求呢？我向feed获取新内容，并且必须在那里使用相同的东西。这个例子似乎表明DomContentLoaded也不起作用：查看它们的源代码。他们通过编码来改变现状。在该函数中编写脚本以替换img标记的src，以便在渲染完成后完成，并对要单独加载的图像执行此操作。多次编写此函数不是问题？您不能将DOMContentLoaded附加到图像，只能附加到文档。