2022年中React场景下后台保持图片常驻加载的现代方案

我开发了一款支持多视图切换的应用，各视图会展示中等规模图片集的不同子集，图片总量远低于可缓存的合理阈值。切换视图时，浏览器有时会在使用缓存副本前，先向服务器校验图片是否为最新版本，这套校验逻辑十分复杂，其原理并非本次问题的核心讨论点。

实际运行时，服务器会返回 304（未修改） 状态码，但校验带来的延迟会导致图片出现pop-in（突然闪现）问题，闪现效果参考下图：

我原本希望实现所有图片的常驻加载，早期该效果可通过display: none实现，但目前该方案已经失效。测试发现使用hidden属性似乎可以达成目标，实现流畅无闪的图片切换效果，流畅效果参考下图：

• 2022年年中阶段，实现图片后台常驻加载的标准方案是什么？
• 我当前的解决思路是否从根本上存在偏差，是否应当采用完全不同的思路处理该问题？

有观点指出JavaScript预加载图片的相关资料已经包含大量实用信息，我完全认可这点，但我在示例中采用的解决思路更符合React开发范式，实现非常简洁，核心代码如下：

// webpack/react 风格的图片导入
import cat001 from "./images/cat001.png";
import cat002 from "./images/cat002.png";
// ...其余图片导入
const CATS = [ cat001, cat002 /* ...其余图片资源 */ ];
// ...
function App() {
  return (
    <>
      {/* 保持所有图片全程常驻加载 */}
      {CATS.map((cat) => (
        <img key={cat} src={cat} alt="a cat" hidden />
      ))}
      {/* 其余业务组件 */}
    </>
  );
}

相比在零散数组中实例化Image对象的传统写法，这种JSX/TSX实现更贴合React的开发逻辑，因此该问题实际更偏向React技术域的特定场景问题。

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