React Suspense实现图片预加载完成后加载，onLoad触发时机异常

首先明确：Image对象的onload事件本身就是图片加载完成后才会触发的——不管是从网络加载还是读取浏览器缓存。你遇到的“触发过早”现象，大概率是浏览器缓存导致的即时触发，这属于正常行为，因为缓存中的图片已经处于加载完成状态。

针对你的代码和需求，以下是优化和验证方案：

1. 修正组件基础写法 #

你的Image组件缺少返回语句且参数处理有误，修正后确保JSX正常渲染：

const Image = ({ src }) => {
  const image = loadImage(src).read();
  return <img src={image.src} />;
};

2. 缓存与强制刷新处理 #

如果需要测试非缓存场景（验证加载等待逻辑），可以给图片URL添加时间戳绕过缓存：

// 在loadImage函数的Image对象赋值时修改
img.src = `${src}?t=${Date.now()}`;

3. 确保createResource符合Suspense规范 #

标准的Suspense资源创建函数需要在read()时抛出未完成的Promise，让Suspense捕获并显示fallback。如果你的createResource逻辑有误，会导致预加载失效，这里提供一个标准实现参考：

function createResource(fetcher) {
  let status = 'pending';
  let result;
  const suspender = fetcher().then(
    (data) => {
      status = 'success';
      result = data;
    },
    (error) => {
      status = 'error';
      result = error;
    }
  );
  return {
    read() {
      if (status === 'pending') throw suspender;
      if (status === 'error') throw result;
      return result;
    },
  };
}

4. 正确使用Suspense包裹组件 #

必须用Suspense组件包裹你的Image组件，才能触发预加载等待逻辑：

<Suspense fallback={<div>图片加载中...</div>}>
  <Image src="你的图片地址.jpg" />
</Suspense>

总结：你的核心预加载逻辑（通过Image对象的onload等待加载完成）是正确的。按照上述调整后，就能确保只有当图片完全加载（或缓存命中）后，页面上的img元素才会被渲染。

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