gatsby-image loading="eager" does not work, only critical={true} works

Created on 20 Jun 2019  路  8Comments  路  Source: gatsbyjs/gatsby

Description

I'm trying to enable eager loading on images using gatsby-image.

Steps to reproduce

  1. npm i --save gatsby-image@latest
  2. Import image from gatsby graphql w/ webp
  3. Place below the fold and turn off chrome cache, and scroll down to image:
<Image loading="eager" />
<Image criticial />

Expected result

Critical and loading="eager" behaves the same way

Actual result

Critical loads the image on DOM entry, loading="eager" behaves like loading="lazy"

Other info

It looks like the gatsby-image source still references the props.critical instead of checking props.loading.

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/src/index.js#L216

Oddly there is a warning that gets thrown here to switch to the new loading prop vs eager:

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-image/src/index.js#L36

good first issue help wanted confirmed bug

Most helpful comment

This is also happening for me. Are there any work arounds?

All 8 comments

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鈥檚 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/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 馃挭馃挏

This is also happening for me. Are there any work arounds?

Me too!

If someone doesn't work on this issue, I can take it :)
Can I?

I'm also experiencing this issue. Sticking with critical for now.

I have raised PR to fix this eager loading issue here https://github.com/gatsbyjs/gatsby/pull/16746

Fixed in in [email protected] thanks to @sagarnasit 馃

A proper fix is published in [email protected]

Was this page helpful?
0 / 5 - 0 ratings