Bootstrap Carousel Carico pigro

Question

Sto provando ad avere il boot pigro Carousel carico pigro. Sembra che questo dovrebbe essere diretto, ma non sto nemmeno ricevendo errori qui per la risoluzione dei problemi. 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> 

E poi 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 errori di Firebug o qualsiasi altra cosa che posso capire, ma le mie immagini semplicemente non si caricano. Probabilmente qualcosa stupidamente semplice qui ...

Answer 1

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

si sta caricando come $nextImage.data('lazy-load-src') ma dovrebbe essere $nextImage.data('data-lazy-load-src') base allo scripting.

Answer 2

Penso che il problema sia il $ nella nextImage var. A meno che tu non stia tentando di precaricare 1 slide in anticipo, passerei anche a un evento "slide" invece di "slid". Inoltre, dovresti probabilmente considerare lo scorrimento avanti e indietro. Questo include controlli per il looping dalla prima foto all'ultima foto e viceversa.

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

ho una soluzione, basta impostare img-url/percorso nel attributo immagine temporaneo, vedi codice qui sotto img è attribuire url

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

quando l'evento scivolò, valore impostato: 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

Ho creato uno snippet di codice piccolo gratuito per avere un carosello di carico pigro utilizzando il bootstrap.

Il codice è in github https://github.com/mconventi/lazy-load-bootstrap-carousel Include un esempio operativo completo.

Sentitevi liberi di usare e personalizzare;)

Answer 5

La soluzione più semplice sarebbe:

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

Questo è tutto!