Bootstrap Carousel Lazy Load

Question

Ich versuche, das Bootstrap Carousel faul laden. Es scheint so zu sein, als ob dies geradlinig wäre, aber ich bekomme hier nicht einmal Fehler zur Fehlerbehebung. 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> 

Und dann 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> 

Kein JS Fehler in Firebug oder alles, was ich herausfinden kann, aber meine Bilder laden einfach nicht. Wahrscheinlich etwas dümmlich einfach hier ...

Answer 1

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

Sie laden als $nextImage.data('lazy-load-src') aber es sollte $nextImage.data('data-lazy-load-src') sein scripting nach.

Answer 2

Ich denke, das Problem ist das $ in Ihrem nextImage var. Es sei denn, Sie versuchen, 1 Folie vorzeitig zu laden, würde ich auch zu einem "Folie" Ereignis anstelle von "gleiten" Ereignis wechseln. Außerdem sollten Sie wahrscheinlich das Vorwärts- und Rückwärtsscrollen berücksichtigen. Dies beinhaltet Prüfungen für das Umkehren vom ersten Foto zum letzten Foto und umgekehrt.

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

    }); 

Answer 3

ich eine Lösung haben, die Sie gerade img-url/path in temporären Bild Attribut festlegen müssen, siehe Code unten img url

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

Attribut hat, wenn ein Ereignis geschoben, Sollwert: 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 
     }); 
}); 

Answer 4

Ich habe ein kleines Code-Snippet erstellt, um ein Lazy-Load-Karussell mit Bootstrap zu haben.

Der Code ist auf Github https://github.com/mconventi/lazy-load-bootstrap-carousel Es enthält ein vollständiges Arbeitsbeispiel.

Fühlen Sie sich frei, um es zu verwenden und anpassen;)

Answer 5

Die einfachste Lösung wäre:

es

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

Das ist!