延迟加载图像 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 属性可以解决问题。