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

Solution 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!

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

    });

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

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

View more solutions