Bootstrap Carousel Lazy Load

Question

I'm trying to have the bootstrap Carousel lazy load. It seems like this should be straight forward, but I'm not even getting any errors here to troubleshoot. JS:

<script type="text/javascript">
    $('#bigCarousel').on("slid", function() {
        // load the next image after the current one slid
        var $nextImage = $('.active.item', this).next('.item').find('img');
        $nextImage.attr('src', $nextImage.data('lazy-load-src'));
    });

</script>

And then html:

<div id="bigCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="active item">
        <img src="assets/bigimage1.jpg" class="img-big">
    </div>
    <div class="item">
        <img data-lazy-load-src="assets/menu-header2.jpg" class="img-big">
    </div>
 </div>
</div>

No JS errors in firebug or anything else I can figure out, but my images just aren't loading. Probably something stupidly simple here...

Anciently

FYI: the event on bootstrap 3 is now slid.bs.carousel eg. $('#myCarousel').on("slid.bs.carousel", function() { ... – Pooka

possible duplicate of lazy load not work in bootstrap carousel – Fluidextract

Answer 1

The simplest solution would be:

<div id="carousel" class="carousel slide lazy-load" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
  <div class="item active"><img src="image1.jpg"></div>
  <div class="item"><img data-src="image2.jpg"></div>
  <div class="item"><img data-src="image3.jpg"></div>
</div>
<!-- controls -->
<ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>
</div>

<script>
$(function() {
    $('.carousel.lazy-load').bind('slide.bs.carousel', function (e) {
        var image = $(e.relatedTarget).find('img[data-src]');
        image.attr('src', image.data('src'));
        image.removeAttr('data-src');
    });
});
</script>

That's it!

Fernandez

Answer 2

I think the problem is the $ in your nextImage var. Unless you are trying to preload 1 slide early, I would also switch to a "slide" event instead of "slid" event. Also, you should probably account for scrolling forwards AND backwards. This includes checks for looping around from first photo to last photo and vice versa.

$('#myCarousel').on("slide", function(e) {

        //SCROLLING LEFT
        var prevItem = $('.active.item', this).prev('.item');

        //Account for looping to LAST image
        if(!prevItem.length){
            prevItem = $('.active.item', this).siblings(":last");
        }

        //Get image selector
        prevImage = prevItem.find('img');

        //Remove class to not load again - probably unnecessary
        if(prevImage.hasClass('lazy-load')){
            prevImage.removeClass('lazy-load');
            prevImage.attr('src', prevImage.data('lazy-load-src'));
        }

        //SCROLLING RIGHT
        var nextItem = $('.active.item', this).next('.item');

        //Account for looping to FIRST image
        if(!nextItem.length){
            nextItem = $('.active.item', this).siblings(":first");
        }

        //Get image selector
        nextImage = nextItem.find('img');

        //Remove class to not load again - probably unnecessary
        if(nextImage.hasClass('lazy-load')){
            nextImage.removeClass('lazy-load');
            nextImage.attr('src', nextImage.data('lazy-load-src'));
        }

    });

Ouphe

I like this method of pre-loading and would recommend it, but you will only benefit from more than 3 slides. – Disbar

This will break on the prev if there is another element after the last item (like the <a> from the example). Fix might be replacing the sibling selector above with sibling(".item:last-of-type") – Metternich

Answer 3

I have a solution, you just need to set img-url/path in temporary image attribute, see code below img has attribute url

<div class="item">
 <img url="./image/1.jpg" src="">
  <div class="carousel-caption">
   <h4>title</h4>
   <p>content</p>
  </div>
</div>

when event slid, set value : src = url

$('document').ready(function() {     
        $('#myCarousel').on('slid', function (e) {
            var url = $('.item.active').find("img").attr('url'); 
            $('.item.active').find("img").attr("src", url); //set value : src = url
        });
});

Entellus

Answer 4

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

You are loading as $nextImage.data('lazy-load-src') but it should be $nextImage.data('data-lazy-load-src') according to scripting.

Astilbe

for me it's not working with the 'slid' event. If use with 'slide.bs.carousel' work's fine. Thx @Sameera Thilakasiri – Sully