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

<divstyle={{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)