Search code examples
javascriptjqueryjquery-lazyload

Lazyload background-image with lazysizes

I want to load a background-image "lazy" with the library http://afarkas.github.io/lazysizes/
They do mention that the loading of "anything" lazily is possible. But the whole documentation on that is that one:

<div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload">
    <!-- widget content -->
<div>

And I don't get how I could use that for a background-image. Does anybody have experience there on that?

Solution

  • To load a background image using lazysizes use the data-bg attribute

    import "lazysizes/plugins/unveilhooks/ls.unveilhooks";

    Usage example:

    <div class="lazyload" data-bg="/path/to/image.jpg"></div>