Support » Plugin: Lazy Loader » background images in css

  • Resolved cijumaya

    (@cijumaya)


    Hey ,
    Thx for your plugin that sound to be much appreciated !

    For my suse, I am not sure to understand if it will go easy to lazyload background images that are written via css using code like
    background-image: url(https://cdn.xxx/image.jpg?id=yyy)

    Is your plugin will find those background images and lazyloaded them or will i have to add extra coding with unveilhooks extension ?

    Can you tell me ?

    Thx for all your work

    Julia

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

    (@florianbrinkmann)

    Hi Julia,

    when the option for background images is enabled, it will handle images that are defined with inline styles, for example:

    <div style="background-image: url(https://example.com/image.jpg)">

    It will not lazy load background images that are set in external CSS files or in <style></style> blocks inside the HTML markup.

    Best,
    Florian

    Thread Starter cijumaya

    (@cijumaya)

    ok thx for your reply Florian,

    well … is there a way to lazyload the background image of the footer ? , as far i saw, the only way to get a background in this area is with css
    or is there an other way with your plug to make it happen ?
    Sorry to bother ! Enjoy sunday

    Ju

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    Hi Julia,

    you can add the class lazyload to your footer element, like that:

    <div class="footer lazyload"></div>

    The lazyload class will be modified by the plugin to lazyloaded when the element is almost visible. So you could then modify the CSS with the background image to the following:

    .footer.lazyloaded {
        background-image: url("theUrl");
    }

    Then the background image will be lazy loaded.

    Hope that helps!

    Best, and enjoy your sunday, too,
    Florian

    Thread Starter cijumaya

    (@cijumaya)

    just perfect ! THX!

    Plugin Author Florian Brinkmann

    (@florianbrinkmann)

    You’re welcome 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘background images in css’ is closed to new replies.