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

Question

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

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

所以

有什么方法可以向 GatsbyImage 组件添加 ref 吗？
有没有其他方法可以检测图像是否已加载？
是使用普通 img 标签的唯一替代方法（并且失去所有 gatsby 图像魔法）吗？

Answer 1

Is there any way to add a ref to the GatsbyImage component?

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

Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

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

Is there any other way to detect if the image has loaded?

不直接。但是，您可以尝试 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
  }}
/>

Is the only alternative to use an ordinary img tag (and lose out on all the gatsby image magic)?

您可以找到一堆依赖项来延迟加载、淡入淡出、模糊、获取图像的背景原色等，但其实现、行为和兼容性将取决于库本身。所以，是的，有其他选择，但我不确定它们是否值得。

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

How to tell if Gatsby Image component has loaded?

reactjs

gatsby

gatsby-image