有没有办法为 gatsby-source-wordpress 中的所有内联图像设置 "loading: lazy" 而不是默认的 "loading: eager"？

Question

我正在尝试减少页面加载时间。现在所有来自 Wordpress 内容的图像都在“加载：急切”。结果所有图像都立即下载到页面上。所以我想知道是否有一个选项可以为所有来自 gatsby-source-wordpress 内容的图像默认设置“加载：惰性”。

为了显示图像，我只是用这种方式：

<div dangerouslySetInnerHTML={{ __html: content }} />

盖茨比 v3.14，节点 12.22.6，盖茨比源 wordpress 5.14，盖茨比插件图像 1.14

Answer 1

我认为您最好的机会是自定义呈现 dangerouslySetInnerHTML 的 content 或尝试 gatsby-wpgraphql-inline-images

对于第一种方法，html-react-parser 等库可能符合您的要求。

而不是：

<div dangerouslySetInnerHtml={{__html: content}}/>

你会做：

<div>{parse(content, {replace: replaceMedia})}</div>

其中 replaceMedia 是获取节点并用自定义标记替换它们的函数：

const replaceMedia = node => {
  if (node.name === 'img') {
    console.log("Check the node data:", node)
    return <img src={node.attribs.src} loading="lazy" alt="Some alternative text" />
  }
};

测试它以检查 node 中的数据并相应地调整它。如果您的图像是本地设置的，您甚至可以使用自定义组件 return a GatsbyImage.

第二种方法将依赖于你的设置，问题中没有提供。

有用的资源：

有没有办法为 gatsby-source-wordpress 中的所有内联图像设置 "loading: lazy" 而不是默认的 "loading: eager"？

Is there a way to set up "loading: lazy" instead of default "loading: eager" for all inline images in gatsby-source-wordpress?

wordpress

lazy-loading

gatsby