I’ve been trying to get images above the fold (eg Hero image) to NOT be lazy loaded. It always is.
What I’ve tried:
Setting Lazy load images to Never in Advanced Settings-> Performance.
Setting lazy: false in the component json (cmd+e)
Setting the lazy prop to false for the Image component in data->code->json
Created a custom component that takes image as an an input parameter and manually using the Image component from @builder/react and setting lazy=false.
Another quirk that is annoying is that if the image is in a Symbol (i.e. a Page Hero symbol) it takes even longer to load. It’s like the symbol is loaded dynamically after hydration that then causes a significant layout shift
Builder content link
Builder public api key
83f2d95e39d4456aa87de5837f1ad558
Detailed steps to reproduce the bug
Using gatsby as the stack put any image on a builder page and try to make it NOT lazy loaded.
Code stack you are integrating Builder with
Gatsby
If you have turned on lazy loading for images in your space settings, Builder’s SDK will observe the element and wait until it’s inside the viewport before loading that image.
Using negative margin values on image containers will affect their normal position and could cause lazy loading to not pick up when placed inside a carousel or a scroller.
I guess that’s the issue. I’ve tuned lazy loading off but it is still being loaded as Lazy. I’m away from my keyboard at the moment but will try and provide more concrete examples other than those already given.
Just wanted to follow up here. In the end I couldn’t resolve this in Gatsby, I ended up switching to NextJS for this project and the problem no longer existed.
