如何检测JPG图片加载成功并同步使用检测结果？

我完全理解你遇到的这个异步问题——图片加载是异步操作，直接同步读取全局变量肯定会拿到初始值，因为onload/onerror事件触发的时机晚于你的同步代码执行。下面给你几个靠谱的解决方案，都是前端开发中常用的处理方式：

方案1：用Promise封装（现代JS首选） #

这种方式把图片加载的异步逻辑封装成Promise，再配合async/await就能像写同步代码一样处理异步结果，非常清晰易维护：

// 封装图片加载检测函数
function checkImageLoad(imageUrl) {
  return new Promise((resolve) => {
    const img = new Image();
    // 加载成功时返回true
    img.onload = () => resolve(true);
    // 加载失败（比如图片不存在、网络错误）时返回false
    img.onerror = () => resolve(false);
    // 设置图片地址开始加载
    img.src = imageUrl;
  });
}

// 使用检测结果
async function processImageResult() {
  // 等待图片加载检测完成，拿到结果
  const isImageLoaded = await checkImageLoad('./your-image.jpg');
  
  // 这里可以直接使用isImageLoaded的结果
  if (isImageLoaded) {
    console.log('图片加载成功！');
    // 执行所有依赖加载成功的逻辑，比如渲染图片、更新UI等
  } else {
    console.log('图片加载失败');
    // 处理加载失败的情况，比如显示占位图、提示用户等
  }
}

// 调用函数启动检测
processImageResult();

方案2：使用回调函数（兼容旧环境） #

如果你的项目需要兼容不支持async/await的旧浏览器，可以用回调函数的方式，把需要使用结果的逻辑全部放在回调内部：

function checkImageLoad(imageUrl, callback) {
  const img = new Image();
  img.onload = () => callback(true);
  img.onerror = () => callback(false);
  img.src = imageUrl;
}

// 调用检测函数，在回调里处理结果
checkImageLoad('./your-image.jpg', (isLoaded) => {
  // 这里直接拿到加载结果
  if (isLoaded) {
    console.log('图片加载成功');
    // 后续逻辑写在这里
  } else {
    console.log('图片加载失败');
    // 失败处理逻辑写在这里
  }
});

为什么你之前的全局变量方法不行？ #

你观察到的“变量值仅在函数执行期间变化，随后恢复原始值”其实是异步时机的问题。举个例子：

let isLoaded = false;
const img = new Image();
img.onload = () => { isLoaded = true; };
img.src = './test.jpg';
console.log(isLoaded); // 这里会输出false！

因为console.log是同步执行的，而onload事件是异步触发的（哪怕图片在缓存里，浏览器也会把onload放到微任务队列里，晚于同步代码执行），所以你读取变量的时候，onload还没执行，自然拿到的是初始值。

额外注意点 #

• 缓存问题：如果图片已经在浏览器缓存里，onload会立即触发，上面的两种方案都能正确处理，因为Promise会立即resolve，回调也会立即执行。
• 跨域问题：如果图片来自其他域名，需要确保对方服务器设置了CORS头，否则onerror可能会被触发（部分浏览器会把跨域图片的加载错误当成普通加载失败）。

内容的提问来源于stack exchange，提问作者Eibo - Sistemas Web