延遲加載在Flexslider

Question

我試圖通過延遲加載jQuery插件，並按照本網站上的說明進行操作以延遲加載Flexslider工作：http://www.appelsiini.net/projects/lazyload

我加載插件腳本，並沒有看到任何錯誤安慰。我嘗試沒有在lazyload函數中傳遞容器或選項，仍然沒有。我花了幾個小時。

$("img.lazy").lazyload({ 
    effect: "fadeIn", 
    container: $(".slides > li") 
}); 

有誰知道如何獲得在Flexslider懶惰加載工作？

Answer 1

所以我加入了真實圖像頁面的數據ATTR屬性上的圖像標籤和after事件火我會active類找出圖像，並設置IMG SRC屬性等於數據ATTR值。

Answer 2

我正在嘗試使用Flexslider 2和Lazy Load Plugin for jQuery來做同樣的事情。

看來container財產只有在元素與overflow:scroll;

我能得到延遲加載使用此代碼的工作風格的作品：

$("#flexcontainer img.lazy").lazyload({ 
    failure_limit : 10, 
    effect: "fadeIn", 
    skip_invisible : false 
}); 

然而，這只是懶惰的負載一切而不是像柔性滑板動畫一樣。

我也能得到它的鼠標工作在使用此代碼：

$("#flexcontainer img.lazy").lazyload({ 
    failure_limit : 10, 
    effect: "fadeIn", 
    event : "mouseover" 
}); 

然而，這並不在觸摸設備上工作。

我認爲關鍵是要創建自己的自定義事件，並讓它在flexslider回調（如after回調）後觸發。

Answer 3

該方法對我來說效果不錯，但加載圖像的大小必須與其餘圖像的大小相同。實際上我用http://imageresizing.net/與模式=墊

在您正在使用的flexslider主容器，把實際的圖像中的「數據-src」屬性

<li> 
    <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" /> 
</li>    

在你的初始化函數，使用「開始「回調以取代實際圖像的加載圖像，並刪除屬性

$('#slider').flexslider({ 
    start: function (slider) { 
     // lazy load 
     $(slider).find("img.lazy").each(function() { 
      var src = $(this).attr("data-src"); 
      $(this).attr("src", src).removeAttr("data-src"); 
     }); 
    } 
}); 

我希望這可以幫助某人。

Answer 4

你還不如初始化一個自定義觸發事件lazyload ...

$jQ("img[data-original]").lazyload({ 
      effect: "fadeIn", 
      skip_invisible: false, 
      event: "forceLazyLoad" 
     }); 

...然後調用此事件預加載flexslider內所有的圖像中包含的電話：

$jQ('.flex-viewport').find('img[data-original]').trigger('forceLazyLoad'); 

Answer 5

爲了提供一個替代解決方案的緣故 - 另一種選擇是使用已延遲加載把它建成一個負責任的滑塊，例如皇家滑塊，這裏是鏈接 - >http://dimsemenov.com/plugins/royal-slider/

Answer 6

我在滾動過程中實現了延遲加載。與此處提出的其他解決方案相比，此解決方案適用於大型集合。在初始化期間，它只加載前5個圖像，然後爲每個動畫加載3個圖像。

<li> 
    <img class="lazy" src="loading-image.jpg" data-src="actual-image.jpg" /> 
</li> 

和JavaScript代碼：

$('.flexslider').flexslider({ 
     animation: "slide", 
     animationLoop: false, 
     controlNav: false, 
     init: function (slider) { 
      // lazy load 
      $("img.lazy").slice(0,5).each(function() { 
       var src = $(this).attr("data-src"); 
       $(this).attr("src", src).removeAttr("data-src").removeClass("lazy"); 
      }); 
     }, 
     before: function (slider) { 
      // lazy load 
      $("img.lazy").slice(0,3).each(function() { 
       var src = $(this).attr("data-src"); 
       $(this).attr("src", src).removeAttr("data-src").removeClass("lazy"); 
      }); 
     } 
    });