Support » Plugin: Lazy Loader » Lazy load elementor section background images

  • Hi,

    I would like to lazy load elementor section background images, but it doesn’t seem to work. They are loaded with external (not inline) css for a div like this: background-image: url(“…”);

    Is there any way to make this work? It would be very much appreciated.

    Best regards and thanks for the great work,

    Florian

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Hi Florian,

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

    Best,
    Florian

    Thread Starter florianm

    (@florianm)

    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

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    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

    Thread Starter florianm

    (@florianm)

    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

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Lazy load elementor section background images’ is closed to new replies.