Gatsby: Gatsby Image Offset For Lazy Loading

[lnikell]

Problem
Using Gatsby Image the images only start loading when you scroll to the object, so it always causes the issue that for few ms the image is not visible and then it appears from blur/or with fade effect.

Expected behaviour
I want to make sure that there is some offset definition to make sure that if I'm currently on the first section of the page, the second section already will load images, then when I'm on 2nd section, the 3rd section images will start loading.

Currently, I could either define loading images immediately(set critical attribute) without waiting for scroll or default lazy loading which triggers actually only when the image appears in the viewport, without any offset.

[freiksenet]

There is already root margin specified for Gatsby Image intersection observer, so it should happen before hand. It's possible to make a PR to add a configuration for it in gatsby-image API. However, 200px is not a small value, so I wonder if you could try it first by increasing this value by editing it in node_modules directly.

[lnikell]

Thank you @freiksenet! I will definitely try it and probably will get back with PR 😀

[lnikell]

So the conclusion is that rootMargin works correctly but unfortunately 200px is very small.
Proposal: It should be the customizable property

Content on modern websites usually section based, each section usually are about full height of the screen, users also scroll by sections rather than just by 200px. In that case, if you have images in the section 2 closer to the bottom of the section, the user always will experience loading/fade in effect when he scrolls through website

[marcel0ll]

Hello, I was looking something to contribute to gatsby and found this issue, so I made the following changes enabling to reconfigure IO as wanted. I still couldn't test it, so I haven't opened a PR yet.

Any comments are appreciated

[freiksenet]

@0tho This looks good, could you make a PR so that we can make a review?

[proAlexandr]

Hi, I have created a PR for this feature (https://github.com/gatsbyjs/gatsby/pull/16004). Could someone, please, review it?

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

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

[gatsbot[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!