Lazysizes: How to properly use in CSS background images?

[tomasts248]

I want to make sure to use it correctly I apologize if is already been answered or if is not supported.
Here's an example:
.image-body {
background: url(//www.website.com/wp-content/themes/theme/css/image-background.jpg) no-repeat;
}

[LeoSeyers]

@tomasts248 There is a plugin for that purpose, you may want to check in the plugin folder for additional documentation : https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset

Not sure it's supported of the box, here is a code sample from the docs :

//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
    var bg = e.target.getAttribute('data-bg');
    if(bg){
        e.target.style.backgroundImage = 'url(' + bg + ')';
    }
});

[jodydonetti]

@tomasts248 you need to use the unveilhooks plugin and simply specify the bg image url in a data-bg attribute on the element directly, not in a css rule, like this:

<style>
.image-body {
  background: no-repeat;
}
</style>

<div
  class="image-body lazyload"
  data-bg="//www.website.com/wp-content/themes/theme/css/image-background.jpg">
</div>

Also consider that lazysizes works by looking at elements with the lazyload css class and when they are (or are about to become) visible in the viewport, it removes that class and add a lazyloading class while lazy loading, and finally remove that and add a lazyloaded class when finished.
So the flow of css classes is .lazyload -> .lazyloading -> .lazyloaded .
Because of that you may even define the background image directly in a css rule, combining your own css class and the mentioned lazyloaded class to get that effect, like this:

<style>
.image-body {
  background: no-repeat;
}
.image-body.lazyloaded {
  background-image: url(//www.website.com/wp-content/themes/theme/css/image-background.jpg);
}
</style>

<div class="image-body lazyload">
</div>

Hope this helps.

[tomasts248]

Thank you so much to both!!! :)
Kind Regards.

[tomasts248]

I have one doubt left: this code when should be required for the unveilhooks plugin

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.requireJs = function(modules, cb){
    window.require(modules, cb);
};

Edit: also is it needed the ".lazyloaded"? seems to work without it.

[jodydonetti]

I have one doubt left: this code when should be required for the unveilhooks plugin

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.requireJs = function(modules, cb){
  window.require(modules, cb);
};

If you don't use js modules I think it is not needed (I've never used it).
So, if you put the 2 <script>s (core + unveilhooks plugin) directly in page you don't need to do anything else.

Edit: also is it needed the ".lazyloaded"? seems to work without it.

It is needed, otherwise you are not lazy loading the bg image, you are loading it right away :-)
I mean, it "works" as in "you will see the image", but it would not have been lazy loaded.
To be clearer, if you do this:

<style>
.image-body.lazyloaded {
  background-image: url(//www.website.com/wp-content/themes/theme/css/image-background.jpg);
}
</style>

you'll see the bg image, and it will be loaded lazily, whereas if you do this:

<style>
.image-body {
  background-image: url(//www.website.com/wp-content/themes/theme/css/image-background.jpg);
}
</style>

you'll see the bg image, but it will be loaded immediately (so, basically, no lazy loading).

[tomasts248]

Understood! thank you :-)