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

Question

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

Answer 1

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

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

  Set the browser’s native lazy loading attribute. One of lazy, eager orauto. Defaults to lazy.

• 在gatsby-image-plugin (v3) :相同的 loading 属性控制此行为:

  Loading behavior for the image. You should set this to "eager" forabove-the-fold images to ensure they start loading before Reacthydration. Defaults to lazy.

此外，在 Swiper 中，您还有一个 bunch of properties你可以提升到 Swiper 组件，在你的情况下，lazy 是你正在寻找的:

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

然后像这样使用它:

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