如何在 React 中显示页面之前加载所有图像？

Question

我正在尝试找到一个更现代的解决方案，它不使用 jQuery，因为我正在使用 React（特别是 Gatsbyjs）。

我有一个包含多个图像轮播的网站，其中包含高分辨率图像。

问题是每个图像轮播一次只显示一个图像，因此只有当用户导航到下一个图像时才会获取图像，这会导致加载外观不连贯。

我曾尝试使用onLoad和load事件侦听器进行在线研究，但到目前为止似乎都没有奏效，因为它们只加载轮播当前显示的图像，而不是轮播中的所有图像。

如果有办法先加载所有图片，然后将状态设置为真，只有在状态为真后，其余的 DOM 才会出现在屏幕上，那就完美了。

有什么建议？ 谢谢。

相关网站： https : //dev--yachtgamechanger.netlify.com/

Answer 1

正如 Lonnie Best 所说，我最终使用Promise.all()来捕获图像的负载。

Answer 2

我猜你的库正在使用延迟加载方法。 当与高分辨率图像决斗时，它真的很棒。 您仍然可以更改在渲染 UI 之前加载所有图像的方法，通过进入轮播组件，通过在渲染之前检查所有图像是否已加载来更改渲染行为。

更新：因为您使用的是 gatsby-image，所以只需使用此属性： loading: "eager" 。 对于 EX：

<Img
        fixed={data.file.childImageSharp.fixed}
        alt="Gatsby Docs are awesome"
        loading="eager"
 />

Answer 3

您可以在onload事件发生之前下载图像，方法是创建一个Image对象并将其src属性设置为图像所在的 URL。

 var image = new Image(); image.src = "https://via.placeholder.com/100.webp/FFFF00/000000/"; onload = function() { document.body.appendChild(image) }

 <p>After the image below is completely downloaded, only then does the onload event fire and then the image is added to the body of the page:</p>

基于这个概念，您可以将任意数量的图像预加载/排队到图像对象中，以便它们可以立即显示（在用户决定查看下一个图像之前）。 这是我在预加载图像之间自动切换的示例（速度快到看起来像 gif 动画——但实际上它是来自 27 个不同 URL 位置的 27 个单独图像）：请参阅雕像示例并查看源代码。