如何使用BXSlider進行延遲加載

我正在使用圖片庫使用Bxslider。我在幻燈片中有超過15張圖片，需要花費很多時間加載。所以我需要在特定的幻燈片出現時逐一加載每個滑塊中的圖像。我從這裏得到了一個例子lazyload and bxslider，它使用LazyLoad加載圖像。但它不適合我。誰能幫我這個？如何使用BXSlider進行延遲加載

即時通訊使用此代碼

$(document).ready(function(){ 
    $("#moreLessons").bxSlider({ 
     startingSlide:1, 
     pager: false 
    }); 
    // trigger lazy to load new in-slided images 
    $("a.bx-prev, a.bx-next").bind("click", function() { 
     // extra call for lazy loading 
     setTimeout(function() { $(window).trigger("scroll"); }, 100); 
    }); 
});

來源

2013-04-18 Anoop John

請出示您正在使用，所以我們可以進一步協助 – Breezer

對不起的代碼，但*「它不工作」 *是不是問題的描述。在目前的形式下，你的問題無法合理回答......投票結束。 – ahren

在控制檯中查看是否有任何錯誤 – Spokey

你可以 '絕招' 通過向移動1個像素的瀏覽器：
$（窗口）.scrollTop（$（窗口）.scrollTop（）+ 1）;在a.bx-prev和a.bx-next上觸發

然後，您可以設置：
$（window）.scrollTop（$（window）.scrollTop（） - 1）;在事件被調用後立即觸發。

因此，如果幻燈片顯示爲50張圖片，則最終不會向下滾動頁面50px。

此方法還可以在Drupal 7中使用bxslider並添加lazyload模塊。只需啓用lazyload，將加載圖標設置爲'none'並將上述JavaScript調用添加到視圖中bxslider設置的回調部分。瞧！繼續，把你喜歡的所有hi-rez圖像放在那裏。

來源

2014-01-18 20:32:42 ZhuRenTongKu

<div class="slider"> 
    <div> 
     <img src="http://placekitten.com/400/200"> 
    </div> 
    <div> 
     <img class="lazy" src="http://placekitten.com/450/200" data-src="http://placekitten.com/450/200"> 
    </div> 
    <div> 
     <img class="lazy" src="http://placekitten.com/500/200" data-src="http://placekitten.com/500/200"> 
    </div> 
</div> 

$(function(){ 

    // create an options object to store your slider settings 
    var slider_config = { 
     mode: 'horizontal', // place all slider options here 
     onSlideBefore: function($slideElement){ 
      var $lazy = $slideElement.find(".lazy") 
      var $load = $lazy.attr("data-src"); 
      $lazy.attr("src",$load).removeClass("lazy"); 
      alert(JSON.stringify($lazy)); 
     } 
    } 
    // init the slider with your options 
    var slider = $('.slider').bxSlider(slider_config); 
});

來源

2017-04-06 11:24:54

如何使用BXSlider進行延遲加載

回答

相關問題