如何判断 Gatsby Image 组件是否已加载？

Question

我有一个GatsbyImage / StaticImage 组件，我使用onLoad 事件来触发动画。但是一旦浏览器缓存了图像，onLoad 事件就不会再次触发。因此，如果您访问不同的页面然后返回，则不会触发动画。

普通图像的常见解决方法是附加ref，然后检查ref.current.complete 以查看图像是否已加载。但GatsbyImage 拒绝接受参考。

所以

1. 有没有办法给GatsbyImage 组件添加引用？
2. 还有其他方法可以检测图片是否已加载？
3. 是使用普通img 标签的唯一替代方法（并且失去了所有盖茨比图像的魔力）吗？

Answer 1

1. 有什么方法可以给 GatsbyImage 组件添加 ref 吗？

显然，你不能。根据这个GitHub thread，它会抛出以下异常：

函数组件不能被赋予 refs。尝试访问此参考 将失败。你的意思是使用React.forwardRef()？

也就是说，您可以尝试使用 forwardRef()，这将为您的用例提供有效范围。

1. 还有其他方法可以检测图片是否已加载？

不直接。但是，您可以尝试onStartLoad callback ，它公开了wasCached 布尔值，为您提供有关浏览器缓存的更多信息和控制权。您可以使用该布尔值再次触发动画或使用全局值以及useState，例如：

<GatsbyImage
  fadeIn={false}
  className="customImg"
  onLoad={() => {
    // do loading stuff
  }}
  onStartLoad={({ wasCached }) => {
    // do stuff on start of loading
    // optionally with the wasCached boolean parameter
  }}
  onError={(error) => {
    // do error stuff
  }}
/>

1. 是使用普通img 标签的唯一替代方法吗（并且失去了所有盖茨比图像的魔力）？

你可以找到一堆依赖于延迟加载、淡化、模糊、获取图像的背景原色等，但它的实现、行为和兼容性将依赖于库本身。所以，是的，有替代品，但我不确定它们是否值得。