Gatsby: Gatsby Image lazy loading intermittently fails to trigger onLoad callback. (Chrome only)

[elliott-greaves-babylon-health]

Description

I am finding Gatsby-Image is intermittently failing to display the full-size lazy loaded image, leaving the blurred variant visible. This only occurs when loading a web page from a cold cache. Refreshing the browser window once renders the images as initially expected.

Steps to reproduce

1. You will need a Gatsby application with Contentful added as a data source.
2. Within React-based page template (not markdown), paste this Static GraphQL query, which requests for fluid variants of all contentful assets

      const { allContentfulAsset } = useStaticQuery(graphql`
        query CONTENTFUL_IMAGE_QUERY {
          allContentfulAsset {
            nodes {
              file {
                url
              }
              fluid(maxWidth: 1050, quality: 85) {
                ...GatsbyContentfulFluid
              }
            }
          }
        }
      `)

1. Select the first image from the response

 const singleFluidImage = allContentfulAsset.nodes[0]

1. Use the Gatsby Image component with the requested image

<GatsbyImage
      title="string value..."
      fluid={singleFluidImage}
      loading="lazy"
      onStartLoad={e => console.log('onStartLoad: Image is loading', e)}
      onLoad={() => console.log('onLoad triggered: Image has loaded')}
/>

1. Build the static site locally running

gatsby build

1. Preview the page template within Chrome (I have version 79.0.3945.130)
2. Gatsby Image renders the blurred image variant
3. onStartLoad callback is called.
4. Full-size images are loaded (See screenshot of Chrome network tab)

5. onLoad` callback is intermittently called after full-size images have downloaded.
   

6. Images remain blurry
   

Expected result

Once a full-size image has finished loading over the network, the onLoad callback should be called, and the blurred image should be replaced with the full-size variant.

Actual result

1. onLoad callback is never called
2. The blurred image is never swapped with the full-size variant

Environment

System:
OS: macOS 10.15
CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.15.1 - ~/.nvm/versions/node/v10.15.1/bin/node
Yarn: 1.22.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.15.1/bin/npm
Languages:
Python: 2.7.16 - /usr/local/bin/python
Browsers:
Chrome: 80.0.3987.122
Firefox: 72.0.1
Safari: 13.0.2
npmPackages:
gatsby: ^2.13.50 => 2.19.19
gatsby-image: ^2.2.42 => 2.2.42
gatsby-plugin-google-analytics: ^2.1.34 => 2.1.35
gatsby-plugin-manifest: ^2.2.4 => 2.2.41
gatsby-plugin-mdx: ^1.0.0 => 1.0.73
gatsby-plugin-offline: ^3.0.16 => 3.0.35
gatsby-plugin-react-helmet: ^3.1.21 => 3.1.22
gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0
gatsby-plugin-sass: ^2.1.20 => 2.1.29
gatsby-plugin-sharp: ^2.2.9 => 2.4.5
gatsby-plugin-typescript: ^2.1.15 => 2.1.27
gatsby-source-contentful: ^2.1.62 => 2.1.86
gatsby-source-filesystem: ^2.1.33 => 2.1.48
gatsby-source-graphql: ^2.1.22 => 2.1.33
gatsby-transformer-remark: ^2.6.37 => 2.6.53
gatsby-transformer-sharp: ^2.2.5 => 2.3.14
npmGlobalPackages:
gatsby-cli: 2.8.3

[TrentYetzer]

I am having the exact same issue, and I have not really been able to find anything that helps. Additionally, when I try to use the ...GatsbyImageSharpFluid_noBase64 fragment to avoid lazy loading the image, it does not appear altogether. However, I don't have any of the issues listed above with gatsby develop, only with gatsby build.

[skingston91]

I have the same issue, working fine with gatsby develop locally but once deployed to zeit now with the git integration my images are only loading the placeholder images. I can see the complied json has the full srcSets etc but they are never loaded.

Although in my case the attempts to log on the server haven't worked

Update Deploying to netlify worked so ignore me, must be an issue with my CI/CD or with Now.sh

[wardpeet]

@elliott-greaves-babylon-health can you link us to a real url? This might be a browser issue that we have to workaround

[elliott-greaves-babylon-health]

@wardpeet the site isn't public yet so I'm not able to share a link. I can confirm this is only an issue in Google Chrome.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[elliott-greaves-babylon-health]

Not stale

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜