图片的延迟加载 gatsby

Question

如果图像的查询在 gatsby 中的父（站点）组件中，则何时加载灯箱的大图像？

• a) 与网站？
• b) 使用小灯箱组件
• c) 点击灯箱的小图片

- site component
  |- lightbox
    |-large img

// site component queries the images
// lightbox onclick opens  large image

有人可以解释一下这种行为以及为什么会这样吗？

Answer 1

假设您使用的是 gatsby-image-plugin 延迟加载是默认设置的，这意味着如果图像在屏幕外，则在它们进入视图之前浏览器不会加载它们。为确保布局不会跳动，在图像加载之前会显示一个占位符。

所以，回答你的问题，应该是“C”选项。 loading 属性 就可以了。