如何在Gatsby中预加载图像？

Question

有没有一种方法可以在向用户展示页面之前预加载每张图片，在Gatsby中实现？假设我想避免Gatsby提供的任何预加载效果。

我还想知道如何强制预加载不可见的图片。这是我正在尝试解决的一个重大问题。请看这个网站：https://festive-bassi-ce307b.netlify.app/。

如果您尝试使用走马灯，则显示的下一张图片将开始预加载，因为它从未被显示过。这真的很愚蠢，因为此时整个页面和图片都已经加载完了。

我正在使用gatsby-plugin-image 和 staticImage 组件。

例子：

<StaticImage
className="img1 img"
src="../images/era_of_manufacturing_ilustrations/work_planning.png"
alt="work planning image"
placeholder="blurred"
layout="constrained"
quality={100}
/>

我也看到旧版的gatsby-image插件有一个“loading”属性，可以设置为eager load(急速加载)。那个属性能解决我的问题吗？

- Martin Starešinčić

Answer 1

有没有一种方法在向用户显示页面之前预加载每个图像，使用 Gatsby？

根据文档，这就是loading属性中eager属性的作用：

对于上方折叠的图片，应将其设置为eager以确保它们在 React 水合之前开始加载。

如果添加：

<StaticImage
  className="img1 img"
  src="../images/era_of_manufacturing_ilustrations/work_planning.png"
  alt="work planning image"
  placeholder="blurred"
  layout="constrained"
  loading="eager"
  quality={100}
/>

他们将在重新水合处理之前开始加载，就好像它们是在屏幕的上方一样。

我不理解您所指的“预加载过程”。Gatsby 图像默认情况下是延迟加载的，但如果您不想添加占位符效果（模糊），可以在 StaticImage 中省略 placeholder 属性。

- Ferran Buireu