CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-2
RubyNoob
RubyNoob

Reputation: 243

Bootstrap Carousel Lazy Load

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

Upvotes: 17

Views: 29626

Answers (4)

ymakux
ymakux

Reputation: 3485

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!

Upvotes: 20

Harry S
Harry S

Reputation: 256

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

Upvotes: 3

Mikey
Mikey

Reputation: 361

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

    });

Upvotes: 6

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

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

Upvotes: 1

Related Questions