GatsbyJS：预加载关键标头图片

Question

我在我的网站上遇到了一个问题，我的首屏标头图片出现得太晚了，这让网站感觉很慢。该网站是用 GatsbyJS 构建的，我也在其中使用 Gatsby Image 插件。我试过 rel="preload as="image" 但这似乎没有任何区别：

<Img
          fluid={
            wpgraphql.imageFile.childImageSharp.fluid
          }
          id="hero__image"
          style={{
            position: "initial"
          }}
          rel="preload"
          as="image"
        />

阅读 Gatbsy Image 文档后，我发现loading="eager" 也可以有所作为。因此，我尝试添加 loading="eager"，但我的标头图片仍然是我的瀑布中最后发现的内容之一。

如何使我的标头图片加载至关重要并在我的瀑布流中更早出现？

Answer 1

Gatsby Image 在src 中使用低质量的预览图像，并延迟从该预览图像切换到全尺寸图像，直到 Gatsby 被客户端初始化（这发生在 React 水合物之后）。出于这个原因，它永远不会对首屏内容特别有效。我建议使用您现在直接从查询中返回的 srcSet 数据：

<img
  srcSet={wpgraphql.imageFile.childImageSharp.fluid.srcSet}
  alt=""
  loading="eager"
/>

您可以在此处设置样式以匹配您想要的输出。