[gatsby-plugin-image] does not trigger onLoad on GatsbyImage

[SujayPrabhu96]

Description

We have pages in which banner image has title and subtitle which shows once the image loads. onLoad event does not trigger while rendering page on second run.

<GatsbyImage image={src} onLoad={setShow(true)}

Steps to reproduce

Step 1. Navigate to /about page by clicking on About in navigation bar from landing-page
Step 2. Redirect to landing-page by clicking on HOME (have video instead of banner image in landing-page, onLoad works fine)
Step 3. Now, redirect back to /about

Expected result

Once redirected to /about in Step 3, title and subtitle should be visible on banner image

Actual result

Once redirected back to /about in Step 3, title and subtitle are not visible on banner image

Environment

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i3-1000NG4 CPU @ 1.10GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 89.0.4389.128
    Safari: 13.1.3
  npmPackages:
    gatsby: ^3.0.2 => 3.0.2
    gatsby-plugin-breakpoints: ^1.3.3 => 1.3.3
    gatsby-plugin-gatsby-cloud: ^1.0.2 => 1.0.2
    gatsby-plugin-image: ^1.0.0 => 1.0.0
    gatsby-plugin-less: ^5.0.0 => 5.0.0
    gatsby-plugin-manifest: ^2.12.1 => 2.12.1
    gatsby-plugin-offline: ^3.10.2 => 3.10.2
    gatsby-plugin-postcss: ^3.7.0 => 3.7.0
    gatsby-plugin-react-helmet: ^3.10.0 => 3.10.0
    gatsby-plugin-react-i18next: ^1.0.4 => 1.0.4
    gatsby-plugin-sharp: ^3.0.0 => 3.0.0
    gatsby-source-filesystem: ^2.11.1 => 2.11.1
    gatsby-source-graphql: ^3.1.0 => 3.1.0
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0
  npmGlobalPackages:
    gatsby-cli: 2.12.117

[LekoArts]

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[SujayPrabhu96]

Hey @LekoArts, this is the minimal reproduction site.

In the above repo, we have 2 pages: landing-page and about, in which, it has banner image and a title which shows up on the image once image loads.

1. Navigate to /about
2. Redirect back to /

Now, once redirected back to landing-page, title does not show up.

[Undistraction]

I'm seeing the same thing. Navigating back to a page that uses GatsbyImage results in the onLoad for that component never being fired. If I run through the gatsby image data and append a cache-buster to the src of all images, I do not see the problem exhibit, so it appears that this is cache-related. The onLoad callback is fired when the image isn't cached and loads, but not fired if the image is already cached.

Note this worked fine with the older gatsby-image, so the bug is specific to gatsby-plugin-image.

Also note that this exhibits on the development server as well as on a build.

@wardpeet

[dungle-scrubs]

There's a solution to a similar problem in Next.js, which involves attaching a ref to the image component and checking its complete property.

However when I try this on a <GatsbyImage> component, I get the error:

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

Is it possible to pass GatsbyImage a ref?

[lnikell]

Potentially that behaviour made on purpose(cc @LekoArts ).

• onLoad event executes only when image actually has been loaded and the network request happened

When you switches between pages there is no additional request happens because image has been cached already, and kinda there is no need for loading it. Which is definitely quite confusing.

However there is another event - onStartLoad. That event fires every time, even on page change and has a wasCached parameter, that indicates whether the image is cached.

As a workaround you can use combination of onStartLoad and onLoad in order to get information about image loading state.

Ideally it would be great to have another event "onReady", that will be triggered no matter it is cached or just loaded.

CleanShot.2021-10-31.at.19.57.02.mp4

You can find the reproduction here

[VallyPepyako]

@lnikell in the same time now not clear how to remove listener if use native one

<GatsbyImage image={image.localFile.childImageSharp.gatsbyImageData} alt="" onLoad={handleImageLoading} />

[Luchanso]

The same solution for this situation
https://stackoverflow.com/questions/59787642/nextjs-images-loaded-from-cache-dont-trigger-the-onload-event