Slick: Add lazy load to background images

[zslabs]

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!

[kenwheeler]

Hmm. Thats an interested case, because most often the background image is set in CSS, not right in the markup. I would recommend using inline images when possible.

[zslabs]

Decided to give this a whirl instead of the whacky way I was doing it and stumbled upon http://css-tricks.com/perfect-full-page-background-image/ Appreciate the nudge!

[kenwheeler]

High five

[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.

[hultberg]

@andrewtibbetts @kenwheeler I have a PR waiting to do this. #916

[SomniusTiger]

I use background: cover; for a large number of background images that I work with, so this feature would be greatly helpful to me. When I do this, I set the background image through a style attribute on a div, so that way the image is still set in the markup.

I do this specifically because I still want to set the image through the markup, but I want to be able to control how my background images are sized within their containers. Hopefully setting the image through the workflow I just described makes this more feasible!

[Abderezai]

I also use slick with background-image inline CSS. It fits to the div perfectly this way. But all images load at once. Would really appreciate progressive lazy loading to work in this case.

[Gouvi]

+1 to this feature.

[geo1004]

+1 would be a nice feature. No news for a while

[STPo]

+1 !

[Abderezai]

You can implement this yourself with javascript and jquery by updating the CSS of each slide to include the background image. You can do a look ahead to make sure the N + 3 slides have their background image's set.

[RobDong]

+1 to this feature.

[carmolim]

+1 to this feature.

[Sanabria]

+1 Please!

[simboonlong]

A DIY example I've came up with:

lazybgimg.html

Hope it helps.

[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.

[MarieComet]

Hi @oneextra,
I'm trying to implement your snippet, but there is a problem because you are removing the image src attr :
image.attr('src',''); //remove source
Before adding it to the background-image...
Also, if i modify your code like this :

$('.slickslider-full-width').on('lazyLoaded', function (e, slick, image, imageSource) {
     imageSource = image.attr('src'); //get source
     parentSlide = $(image).parent('.slick-slide.slick-current');
     parentSlide.css('background-image','url("'+imageSource+'")'); //replace with background instead
     image.attr('src',''); // remove source
 });

I don't see any better lazyloading... What I am missing ?

[lnilya]

@MarieComet I didn't try it the other way around, removing the src AFTER adding the background image. I don't know, but why should this make a difference, you can have both, the src attribute should be overriding it. The only thing that changes is the dimension of the image, since it is now "empty", without the soruce. So make sure that the img has a min-height/height and width set somehow, since without the image itself the slide might have a height of 0 and not be visible.

Just to exclude the easiest explanation: Are you sure you haven't forgotten to activate lazyLoading on the slider or something? And are you sure you have correct image source provided?

But the code you are seeing is precisely the code I am using at http://ihrehausnummer.de/ and it works fine for me. (However the image will have a light gray outline of an empty image, that I cover up with an absolutely positioned container + 2 px white border.)

Also you don't need to retrieve the src of the image from the image itself, because it is passed to the lazyLoaded callback anyway.

Like this you get the benefits of background-image with and the benefits of lazy loading.

Good luck

[ashrafreda]

Thanks oneextra, work correctly.

[DennisLypovetsky]

Thanks @oneextra, works brilliantly! Except that I removed image.attr('src',''); //remove source, because to use Slick's lazyLoad: 'ondemand' we have to replace src in <img> tag to data-lazy.

Like this:
<img(data-lazy="img/main-bg-1.jpg"/>

UPD day latter: Sorry, I messed up. U do need image.attr('src',''); //remove source. The code is legit.

[stratboy]

+1 this would be really nice

[sjclark]

+1 Amazed this has been talked about for years but never implemented

[PopcornDesign]

+1 Still waiting for this.
Perhaps lazy load for background images like blazy.js

Read upon BlazyJS documentation, would be perfect if merged into slick

[tackenco]

Hi @oneextra, Just found your solution, perfect. Thanks!

For me, I usualy use a div with the background image attached and simplified your code like this:

$('.ref-slider').on('lazyLoaded', function (e, slick, image, imageSource) { image.parent().css('background-image', 'url("' + imageSource + '")'); image.hide(); });

My surrounding div has all the style set in the css and only the background image style is set inline. The image is just hidden and won't bother you no more ;-)

Thanks again!

[emrebostan]

$(".img-lazy").lazyload({data_attribute: "src",load: function() { $(this).removeClass("img-lazy") }});
$("#slider").mouseenter(function(){
$(this).find(".img-lazy").each(function(){
$(this).css("background-image","url(" + $(this).data("src") + ")").removeClass("img-lazy");
});
});

[italomandara]

https://github.com/kenwheeler/slick/pull/3076 I hope it helps

[matias-autio]

Instead of setting the image source to empty, I replaced it with a transparent gif (copied from bLazy's demo page like this:

image.attr('src','data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');

That removes the problem of missing source image having a light gray outline. (Thanks @oneextra for a great fix).