如何在不包裹大量代码为函数的前提下延迟JS代码至图片加载完成？

方法一：用Promise + async/await（最推荐） #

这种方式能让代码保持线性执行逻辑，完全不用把大量代码塞进回调函数里：

(async function() {
  // 等待图片加载完成
  await new Promise(resolve => {
    const myImage = new Image();
    myImage.onload = resolve;
    myImage.src = myImgURL;
  });

  // 这里直接写你的2000行剩余代码就行，不用额外嵌套缩进
  // 示例逻辑：
  console.log('图片加载完了，开始跑剩下的代码');
  // ... 你的所有剩余代码
})();

如果需要复用图片加载逻辑，还可以单独封装成函数：

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = err => reject(err); // 可选：处理加载失败的情况
    img.src = url;
  });
}

(async function() {
  try {
    await loadImage(myImgURL);
    // 剩余代码写这里
  } catch (err) {
    console.error('图片加载失败:', err);
  }
})();

方法二：用自定义事件拆分代码 #

如果不想用async/await，也可以通过自定义事件把图片加载逻辑和剩余代码分开：

const myImage = new Image();
myImage.onload = () => {
  window.dispatchEvent(new Event('myImageLoaded'));
};
myImage.src = myImgURL;

// 剩余代码写在这个事件监听里，虽然还是函数，但至少和加载逻辑分离，不用嵌套在一起
window.addEventListener('myImageLoaded', () => {
  // 你的2000行代码放这里
});

这两种方法都能避免把大量代码塞进onload的回调函数里，让代码结构更清晰，不用处理复杂的缩进和括号嵌套。

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