I am rebuilding a website and use a background image in the hero. There is Lazy Load on the image but I can’t find a good solution to disable lazy-load only on that background-image.
Add attribute loading=eager for that particular background image from Style → Attribute.
Hmm … it is an background image (now in the css). Is that possible in the editor?
Ah! I missed that it’s an bg image. The attribute will only work for img tag and not background images.
Go to image element 
style tab ATTRIBUTES add name = loading value = eager
2 Likes
Maybe I will change it to an normal image and then a second div with absolute for the title.
It is an background image. That doesn’t work.
Well, use image instead of background. Set image position to absolute and z index -1. Then set exactly the same height and width of container to image and set object fit to cover.
3 Likes
Whow!!! Image position absolut… I think that is the trick.
Sorry… there is an problem I don’t understand. Adding attributen loading valuer eager won’t fix the problem. https://update3.ccmp.nl/ When you load the page you see that the header image is 500 ms later (size 150kb).
When I set ‘disable lazy loading’ in the settings to on then the problem is solved. Setting off, the image has a delay. The image has the good attribute.
What can be the problem?
I’m not sure how bricks operates lazy loading.
I guess you could turn it off completely in bricks and just add that attribute for every image that you use inside bricks. You can use an image global element with that attribute and add it and unlink it every time.
For what it’s worth, I ran into this today and the solution does seem to work now.
I set the attribute loading to eager on the container with the background image and it stopped lazy loading the background.
2 Likes