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

FYI: the event on bootstrap 3 is now `slid.bs.carousel` eg. `$('#myCarousel').on("slid.bs.carousel", function() { ...` — Gianfranco P., Dec 15 '13 at 14:59
possible duplicate of [lazy load not work in bootstrap carousel](http://stackoverflow.com/questions/27675968/lazy-load-not-work-in-bootstrap-carousel) — cmeeren, Jul 22 '15 at 13:22

score 20 · Answer 1 · answered Jan 26 '16 at 13:53

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!

score 6 · Answer 2 · answered May 18 '13 at 04:41

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'));
        }

    });

I like this method of pre-loading and would recommend it, but you will only benefit from more than 3 slides. — CTS_AE, Jan 02 '14 at 22:36
This will break on the prev if there is another element after the last item (like the from the example). Fix might be replacing the sibling selector above with ``sibling(".item:last-of-type")`` — data, Feb 15 '15 at 21:18

score 3 · Answer 3 · answered Dec 17 '13 at 06:03

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
        });
});

score 1 · Answer 4 · answered Jan 28 '13 at 22:25

1

$('#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.

answered Jan 28 '13 at 22:25

Sameera Thilakasiri

9,452
10
51
86

for me it's not working with the 'slid' event. If use with 'slide.bs.carousel' work's fine. Thx @Sameera Thilakasiri – calin24 Sep 04 '18 at 13:23

Bootstrap Carousel Lazy Load

4 Answers4