Lazy load elementor section background images

  • florianm

    (@florianm)


    4 years, 3 months ago

    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)

    4 years, 2 months ago

    Hi Florian,

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

    Best,
    Florian

    Thread Starter florianm

    (@florianm)

    4 years, 2 months ago

    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)

    4 years, 2 months ago

    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)

    4 years, 2 months ago

    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)

    4 years, 2 months ago

    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.