如何检测JS动态设置src后图片是否加载完成并触发动画？

你当前的代码直接设置图片src后就更新文本内容，但图片加载需要时间，导致动画启动后图片才延迟显示。不用定时器的话，可以通过监听图片的load事件来精准控制动画时机，具体方案如下：

核心思路 #

先创建一个独立的Image对象预加载目标图片，监听它的load事件——当图片完全加载完成后，再把图片设置到DOM元素中，同时更新文本并启动动画。这种方式能适配不同网络环境的加载时长，比定时器精准得多。

改进后的代码示例 #

// 创建图片对象用于预加载
const bgImage = new Image();

// 图片加载完成时触发的逻辑
bgImage.onload = function() {
  // 将加载完成的图片赋值给DOM元素
  dynamicBg.src = this.src;
  // 更新所有文本内容
  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;
  // 启动你的动画（替换成实际的动画启动函数）
  startAnimation();
};

// 处理图片加载失败的情况，避免动画一直无法触发
bgImage.onerror = function() {
  console.error('背景图片加载失败');
  // 可选：即使加载失败也启动动画，或者做其他降级处理
  startAnimation();
};

// 设置图片地址开始加载
bgImage.src = Dynamic_Content.Image_URL.Url;

// 处理图片已被缓存的情况（避免onload不触发）
if (bgImage.complete) {
  bgImage.onload();
}

关键细节说明 #

• 预加载图片：用独立的Image对象加载图片，不会立刻渲染到页面，等加载完成后再赋值给DOM元素，避免页面上出现加载中的空白。
• 缓存处理：如果图片已经在浏览器缓存中，onload事件可能不会触发，所以需要检查complete属性，手动调用onload逻辑。
• 错误兜底：添加onerror事件处理，防止图片加载失败导致动画永远无法启动，提升健壮性。

内容的提问来源于stack exchange，提问作者Matias Clavell