JavaScript中实现等待图片加载完成后再执行后续代码的方案咨询

嘿，我帮你看看这个问题～首先你的代码里有几个小语法错误得先修正，然后再解决异步等待的核心问题：

先修正代码里的基础错误 #

1. 变量声明语法错误：你写的var width, height = "width", "height"不符合JS语法，应该先声明变量（推荐用let/const代替var），初始值可以留空：

   let width, height;
   

2. 变量名不一致：你创建的是img = new Image()，但后续用的是image.onload和image.src，变量名要统一成img或者image。

核心问题：图片加载是异步操作 #

图片的onload是异步事件——浏览器会在后台加载图片，加载完成后才会触发这个回调函数，而你后面的console.log是同步执行的，所以会先输出初始值，等图片真的加载完时，log早就跑完了。

两种解决方案 #

方案1：把后续逻辑放到onload回调里 #

这是最直接的方式，所有需要用到图片尺寸的代码都放在onload回调内部，确保只有图片加载完成后才执行：

let width, height;
const img = new Image();
img.onload = () => {
  width = img.width;
  height = img.height;
  // 所有依赖图片尺寸的逻辑都写在这里
  console.log(width, height); // 现在能正确输出图片真实尺寸了
};
img.src = "https://cdn.discordapp.com/avatars/418893693106389024/aaed638ebdb3bfe2d4e1d3e7f9da62ef.png?size=256";

方案2：用Promise+async/await封装（更适合复杂场景） #

如果你的逻辑比较复杂，或者需要和其他异步操作配合，用Promise封装图片加载过程，再通过async/await实现“同步风格”的异步代码，可读性更强：

// 封装图片加载为Promise
function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img); // 加载成功时返回图片对象
    img.onerror = () => reject(new Error("图片加载失败")); // 处理加载失败的情况
    img.src = url;
  });
}

// 用async函数执行异步逻辑
async function getImageSize() {
  try {
    // 等待图片加载完成
    const img = await loadImage("https://cdn.discordapp.com/avatars/418893693106389024/aaed638ebdb3bfe2d4e1d3e7f9da62ef.png?size=256");
    const width = img.width;
    const height = img.height;
    console.log(width, height);
    // 这里可以继续写所有需要用到图片尺寸的后续代码
  } catch (error) {
    console.error("出错了：", error);
  }
}

// 调用函数
getImageSize();

额外提醒 #

如果图片来自其他域名，要确保服务器设置了CORS跨域头，否则可能无法正常获取图片的宽高，甚至触发跨域错误。你用的这个Discord头像链接应该是允许跨域的，所以没问题。

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