延迟加载图像 gatsby

问题描述

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

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

- site component
  |- lightBox
    |-large img

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

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

解决方法

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

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