帶AJAX功能的jQuery循環插件

Question

我有一個頁面，我將有多個圖片滑塊（如50個滑塊+每個5-10張圖片）。不幸的是，由於這個大量的滑塊，頁面加載速度真的很慢： - （

到目前爲止，我一直在使用着名的jQuery循環插件Malsup。但是，這缺乏AJAX功能，因爲圖片需要加載之前發射的循環功能。

我半經驗豐富，但缺乏時間寫我自己的libary相適應我的需要。

因此這個問題，沒有任何人有一個jQuery的知識滑動（阿賈克斯加載）圖片插件？我一直在網上搜索，但是太多的數據壓倒了真實的結果。

提前致謝！

Answer 1

這是一種破解，但可能能夠爲你工作，滑塊插件支持前後功能，我們可以利用它來推遲爲您加載的圖像。

給出以下標記：

<div id="s1" class="pics"> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" /> 
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" /> 
    <img asrc="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" /> 
</div> 

公告前兩個具有有效的src ATTR，但其餘的都是未通過瀏覽器加載ASRC。

現在使用前後功能，我們可以利用它並將asrc切換到一個真正的src，這將導致瀏覽器查詢圖像。

$('#s1').cycle({ 
    fx: 'shuffle', 
    speed: 'fast', 
    timeout: 0, 
    next: '#next2', 
    prev: '#prev2', 
    before: function(currSlideElement, nextSlideElement, options, forwardFlag) { 
     if ($(nextSlideElement).attr("asrc")) { 
      $(nextSlideElement).attr("src", $(nextSlideElement).attr("asrc")); 
     } 
    }, 
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) { 
     if ($(nextSlideElement).attr("asrc")) { 
      $(nextSlideElement).attr("src", $(nextSlideElement).attr("asrc")); 
     } 
    } 
}); 

這個例子在jsfiddle。