Question

I have got the bootstrap carousel working on my web page and i want it to lazy load.
I have found this piece of code on the internet:

$("#myCarousel").bind("slid", function(){
    $img = $(".active img", this);
    $img.attr("src", $img.data('lazy-load-src'));
});

This causes the carousel to “load” the current image when the next button (or prev) button is clicked. I want it to load not the current image but the image after that, and the image in front of the current image, so that i still have the nice sliding animation. And not a loading image.

So my question is how do I set the lazy-load-src to src of the previous image and of the next image when the next button is clicked?

Answer 1

There are several options, depending on the precision you need, but you should keep the lazy-load-src to their own img tags.

You can use selectors, put in data- attributes and use that to select your next image to load. But this is messy.

I think your best shot is using the .next() method on your items, so that on slid you load the next image. Something like :

$('#myCarousel').on('slid', function() {
    var $nextImage = $('.active.item', this).next('.item').find('img');
    $nextImage.attr('src', $nextImage.data('lazy-load-src'));
});