有没有办法为 gatsby-source-wordpress 中的所有内联图像设置“加载：惰性”而不是默认的“加载：渴望”？答案

【问题标题】：Is there a way to set up "loading: lazy" instead of default "loading: eager" for all inline images in gatsby-source-wordpress?有没有办法为 gatsby-source-wordpress 中的所有内联图像设置“加载：惰性”而不是默认的“加载：渴望”？
【发布时间】：2021-10-06 21:51:13
【问题描述】：

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

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

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

盖茨比 v3.14， NodeJs 12.22.6, 盖茨比-源-wordpress 5.14， Gatsby-plugin-image 1.14

【问题讨论】：

标签： wordpress lazy-loading gatsby

【解决方案1】：

我认为您最好的机会是自定义 content 以呈现 dangerouslySetInnerHTML 或尝试 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 中的数据并相应地调整它。如果你的图片是本地设置的，你甚至可以使用自定义组件返回一个GatsbyImage。

第二种方法将取决于您的设置，问题中未提供。

有用的资源：

【讨论】：

我已经用 html-react-parser 尝试了你的方法，它对我来说效果很好。自 Gatsby 版本 3 以来，您提到的另一种方式（gatsby-wpgraphql-inline-images 和来自 dimitr.io）似乎已经被贬低并且不兼容。但我仍然有点困惑，因为在 gatsby-config 中没有选项。 js 允许我们将加载默认设置为惰性...