如何用JS实现第一张广告图加载完成后再加载第二张广告图

直接上结论：用Promise/async方案，完全没必要用cookie。

为什么排除cookie方案？ #

cookie是用来跨页面存储少量持久化数据的机制，和图片加载顺序控制完全不相关。用cookie实现这个需求属于绕远路：你得先把第一张图的信息存进cookie，再读取cookie加载第二张，不仅多了不必要的IO开销，还可能因为cookie的存储限制、兼容性问题出bug，完全是画蛇添足。

Promise/async方案的实现思路 #

核心逻辑是监听第一张图片的加载状态（成功/失败），在状态确定后再触发第二张图片的加载。用Promise封装图片加载过程，能清晰处理异步流程，同时覆盖加载成功和失败的场景。

步骤1：封装图片加载的Promise函数 #

先写一个通用函数，传入图片地址，返回Promise对象，成功时返回加载完成的图片实例，失败时抛出错误：

function loadImage(src) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    // 图片加载成功时触发resolve
    img.onload = () => resolve(img);
    // 图片加载失败时触发reject
    img.onerror = () => reject(new Error(`图片加载失败：${src}`));
    // 开始加载图片
    img.src = src;
  });
}

步骤2：顺序加载两张广告图 #

有两种写法，逻辑完全一致，选你看着顺眼的就行：

写法1：Promise链式调用

// 先加载第一张广告图
loadImage('第一张广告图地址.jpg')
  .then(firstImg => {
    // 第一张加载成功，把它插入DOM（如果还没插的话）
    document.getElementById('first-ad').appendChild(firstImg);
    // 现在加载第二张广告图
    const secondImg = new Image();
    secondImg.src = '第二张广告图地址.jpg';
    document.getElementById('second-ad').appendChild(secondImg);
  })
  .catch(error => {
    console.error(error);
    // 第一张加载失败，按你的需求处理：比如不加载第二张，或者提示用户
    alert('广告加载异常，无法展示完整动画');
  });

写法2：async/await（更直观）

async function loadAdsInOrder() {
  try {
    // 等待第一张图片加载完成
    const firstImg = await loadImage('第一张广告图地址.jpg');
    document.getElementById('first-ad').appendChild(firstImg);
    
    // 第一张加载成功，再加载第二张
    const secondImg = new Image();
    secondImg.src = '第二张广告图地址.jpg';
    document.getElementById('second-ad').appendChild(secondImg);
  } catch (error) {
    console.error(error);
    // 处理加载失败的逻辑
    // 比如：不加载第二张，或者隐藏广告容器
    document.getElementById('ad-container').style.display = 'none';
  }
}

// 调用函数启动加载流程
loadAdsInOrder();

为什么这个方案能满足你的需求？ #

• 精准控制加载顺序：第二张图只会在第一张图的加载状态确定（成功/失败）后才开始加载，完全避免了异步加载导致的动画不同步问题。
• 覆盖异常场景：通过catch块能处理第一张图加载失败的情况，你可以根据业务需求决定是否加载第二张，或者做其他补救操作。
• 无额外开销：所有逻辑都在内存中完成，不需要依赖任何存储机制，代码简洁易维护。

内容的提问来源于stack exchange，提问作者Mike Lin