Images is loaded twice with different initiators ImageRef.js lazy-loading

[maxhaensel]

Description

Hi we have the flowing Problem:

GBI loads the image sometimes twice. It has sometimes too different initiators the ImageRef.js and the index document itself. I guess there is some preloading-logic baked in.

The Problem is, when the ImageRef.js is starting the download it remove the placeholder and display a blank or colored-area, then the index is also starting the download but must wait until the ImageRef.js is finished. So there is a long time where no image is displayed

Also i have to load the Image twice and have to wait for both images.

Is there a way to disable the ImageRef.js logic? Or is there some tricky hack to avoid such a behavior.

Thanks a lot

Steps to reproduce

I Cloned your Example-Project: https://github.com/timhagn/gbitest
I added a big-blank-div on top

    <div style={{ height: 4000, display: 'block' }}></div>

Setting the Network in Chrome to Slow 3G
Starting to scroll slowly to the bottom of the page

Expected result

Maybe disable the ImageRef.js-logic? I´am not sure whats happen than :)

Actual result

Loads the Image only once

Environment

OS: macOS Catalina
Browser: Chrome - Version 84.0.4147.105 (Offizieller Build) (64-Bit)
Browser IntersectionObserver (no polyfil)

[timhagn]

Hi @maxhaensel,

thnx for bringing this up. Seems to be that gatsby changed the scroll-handler behavior in version 2.23.5 resulting in gbi getting called again on scroll. Tried a few ways to disable it, but sadly to no avail.
Opened up a bug issue over at gatsby, asking for help.
I created a repoduction branch with your steps for them as well.

The only workaround I could find is setting critical on the BackgroundImage, which of course is less than desirable : /.
Hope they will reply and not just close it...

And to really quickly explain, why I can't just disable the

ImageRef.js-logic

activatePictureRef() does the heavy lifting for gbi, preparing an Image Reference in the shadows (literally - it gets created in the Shadow DOM (so to speak) and is a normal HTMLPictureElement with sources & the img, so we can find out which image the browser wants to load (e.g. .webp instead of .jpg, the width / height, etc.).

So nope, sadly no way around that ; ).

Best,

Tim.

[github-actions]

Hi there!
As @timhagn momentarily is the main contributor to this package, this issue
has been automatically marked as stale because it has not had
any recent activity.
It will be closed if no further activity occurs, though we're open to
suggestions on how to get more maintainers!
Thank you for your contributions : )!

[maxhaensel]

Ok thx for investigating the issue :) Too bad that there is no solution yet :/

[ewindso]

I'm experiencing this too...

What is strange also, is that initially it will load the webP only.

BUT, when I click a Link, it loads the webP again, and the large PNG...?!

[mikevercoelen]

For us, it's even worse seeing images loaded 3 times

[mwskwong]

This is an upstream issue to gatsby-plugin-image which they have no fix for this as well, although it will unlikely to impact performance in real-life usage because it only appears when you disable caching.

[Frostbourn]

Any news on that?

[not-authorized]

Hi there! Is there any simple and properly working way to set the background image in Gatsby? Unfortunately, this plugin makes multiple requests for every size of every image. Is the Gatsby project still alive?