如何使用 Swiper 延迟加载 Gatsby-Plugin-Image？答案

【问题标题】：How do I Lazy Load Gatsby-Plugin-Image with Swiper?如何使用 Swiper 延迟加载 Gatsby-Plugin-Image？
【发布时间】：2021-10-17 13:06:11
【问题描述】：

目前，当我从 swiper.js 加载滑块时，gatsby 图像会自动加载所有图像，即使最终用户看不到它们。这不是我想要的行为。我只想加载可见幻灯片或可见缩略图幻灯片的图像。有人对此有解决方案吗？

【问题讨论】：

【解决方案1】：

应该是自动管理的，因为 Gatsby 默认添加了延迟加载。

在gatsby-image (v2) 中：loading 属性控制此行为。

设置浏览器的原生延迟加载属性。懒惰、渴望或汽车。默认为懒惰。
在gatsby-image-plugin (v3)：相同的loading 属性控制此行为：

图像的加载行为。您应该将其设置为“渴望” 首屏图像以确保它们在 React 之前开始加载水合作用。默认为懒惰。

此外，在 Swiper 中，您还有一个 bunch of properties 可以提升到 Swiper 组件，在您的情况下，lazy 就是您要查找的内容：

  let params = {
    // other props
    lazy: true,
  };

然后像这样使用它：

  <Swiper {...params}>
   // your slides here
  </Swiper>

【讨论】：