如果后面在js代码中添加了src，如何检查图片是否加载？

Question

我有这个动态代码

dynamicBg.src = Dynamic_Content.Image_URL.Url; 
headline1.innerHTML = Dynamic_Content.Headline; 
headline2.innerHTML = Dynamic_Content.Headline2; 
headline3.innerHTML = Dynamic_Content.Headline3; 
fullHeadline.innerHTML = Dynamic_Content.fullHeadline;  
cta_1.innerHTML = Dynamic_Content.CTA;

因此动画开始，图像稍后出现。 关于如何检查图像是否已加载然后制作动画有什么想法吗？

谢谢！

我尝试使用计时器，但我想准确地捕获事件

Answer 1

您可以而且应该使用图像的

load

事件。首先附加处理程序，然后更新

src

属性。

var img = document.querySelector("img")
img.addEventListener("load", function(ev) {
  console.log("image loaded")
})
img.src = "https://picsum.photos/150"

<img>