Bootstrap傳送帶延遲加載

Question

我試圖讓Bootstrap傳送帶延遲加載。看起來這應該是直接的，但我甚至沒有任何錯誤在這裏排除故障。 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> 

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

螢火蟲或其他任何東西沒有JS錯誤，我可以計算出，但我的圖片只是不加載。也許在這裏的東西太簡單......

Answer 1

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

您正在加載爲$nextImage.data('lazy-load-src')，但應根據腳本是$nextImage.data('data-lazy-load-src')。

Answer 2

我認爲問題是您的nextImage var中的$。除非您嘗試提前預載1張幻燈片，否則我也會切換到「幻燈片」事件而不是「滑動」事件。另外，您應該考慮向前滾動和向後滾動。這包括檢查從第一張照片到最後一張照片的循環，反之亦然。

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

我有一個解決方案，您只需要設置IMG-URL /路徑臨時圖像屬性， 見下文IMG代碼屬性網址

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

當事件下滑，設定值：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

我創建了一個免費的小代碼片段，以便使用bootstrap實現一個懶惰的加載輪播。

代碼位於github上https://github.com/mconventi/lazy-load-bootstrap-carousel 它包含一個完整的工作示例。

隨意使用和定製;）

Answer 5

最簡單的解決辦法是：

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

這就是它！