Add lazy load to background images

Hi all, Love Slick, thanks for creating this! Was wondering if the lazy load logic could also be added to background images that may be attached to each slide. Right now I’m using background-size:cover on desktop (and manually setting the height) compared to swapping the background out for a static image on smaller devices. I could obviously add the lazy load handler for the inline images, but they’d be loaded regardless because of the background image reference. Thanks!

[lnilya]

I use the lazyLoaded Event and replace the src attribute with the background attribute. Looks something like this:

$('.ref-slider').on('lazyLoaded', function (e, slick, image, imageSource) {
        
       image.attr('src',''); //remove source
        image.css('background-image','url("'+imageSource+'")'); //replace with background instead
        image.css('background-size','cover');
        image.css('background-position','center');
        image.css('background-repeat','no-repeat');

    });

Maybe this helps! This way you build your slides normally with tags and data-lazy attributes, but have the benefits of the fixed height/cover etc. props. Also fading on of the slick slider works properly.

[andrewtibbetts]

I often have slides generated from a database (images + etc are set in CMS) and are therefore not available to CSS. And having inline images act like background-size:cover takes some js trickery and is a real pain. This would be of great help to me.