Lazy load elementor section background images

Hi Florian,

that is possible but not automatically, you would have to make manual modifications. I described it here: https://www.ads-software.com/support/topic/elementor-slider-background-images/

Best,
Florian

Hi Florian,

Thank you for your response, I added the class lazyload to the last image as a test, but that didn’t seem to work. Then I looked at the extra css you provided, but I am not sure how to apply that in this case. It is just a static background of a section, not a slider.

You have any idea what the css should be?

Best regards,

Florian

Hey Florian,

you could try to add the lazyload class to the section in elementor and then use the following CSS to hide the section until it is lazyloaded:

.elementor-section.lazyload {
    visibility: hidden;
}

Or maybe you need display: none;. That will hide the complete section until the user scrolls near to it, and might prevent the background image from being loaded.

Best,
Florian

Hi Florian,

Thank you, but when I add the css you requested it still doesn’t lazy load when I look in the console, but it does add the class lazyloaded when I look on the page.

When I add the display:none css the section doesn’t show and this also doesn’t lazy load.

Are there particular settings I need to have?

I have the following settings checked:

– Include lazysizes unveilhooks plugin
– Enable lazy loading for inline background images

Best regards,

Florian

Hi Florian,

the settings should be fine. Hm, then the only possible solution I can think of is modifying the CSS that is generated by Elementor, but I am not sure if that is possible. I will take a look at it and see if that is possible, but it might take some time.

Best,
Florian