在实际呈现图像之前，Image属性complete返回true

Question

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

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

这是为什么？为什么图像被认为是加载的，即使它在完全渲染之前需要额外的10秒？

这在Firefox，Chrome和Safari中都会出现。

Answer 1

使用DOMContentloaded，如

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

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

参考here