Add ability to adjust gatsby-image lazy loading threshold

[FraserThompson]

Summary

I would like to be able to change the "threshold" before an image is loaded. So instead of loading the image as soon as it enters the viewport, I'd like this to be configurable so more images are loaded.

Motivation

I use gatsby-image in an image gallery which can have up to 60 or so photos, displayed in a single column on mobile.

Lazy loading is obviously essential to ensure all 60 aren't downloaded at once, but scrolling through the images isn't a nice experience when you have to wait a second or so for each image to load as soon as it enters the viewport. If we could configure the threshold to load more images before the user gets to them it would improve the experience for users.

[m-allanson]

Thanks for opening this @FraserThompson! There's been a few bits of discussion around this in the past. Check out the comments on this PR #13816 (comment)

To summarise the discussion there - we're moving towards letting the browser handle this natively and currently we don't want to add an option that makes the threshold configurable. However we would be interested in seeing research that identifies a better default value - the current value is 200px.

Do you have a link to your gallery? That might be a good example case where the existing threshold doesn't work well.

[FraserThompson]

Oh sorry, I did do a search but somehow missed that PR...

Here's the gallery I'm talking about: https://dunedinsound.com/gigs/primitive-man---dunedin/

It works okay on desktop but for a user scrolling through relatively quickly on mobile to get a good look at all the images the loading lags behind at some points.

[KyleAMathews]

Could you try upgrading the distance to e.g. 350px see how big of difference that makes?

[polarathene]

There are plans to refactor gatsby-image functionality to be more composable for v3 of Gatsby. That will allow you to use the default, or alter/swap certain behaviour more easily for more niche needs.

Presently, you could consider something like react-waypoint, having it trigger critical / loading="eager" props to opt-out of lazy-load for n images?

but for a user scrolling through relatively quickly on mobile to get a good look at all the images the loading lags behind at some points.

I don't think much can be done about that regarding scrolling quickly. All images prior will be still queued up to download, the browser may lower the priority to focus on those in/near the viewport though. You could consider a virtualized list component, that would remove the images further away from the view which should cancel the browser downloading them, allowing for the images in the users view and near it to be prioritized.

[gatsbot]

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

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

[gatsbot]

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!