[jQuery] 加速 s3Slider 圖片輪播器載入圖片的效率
前一陣子為了在網頁上顯示輪播的相片，
在網路上找了一下相關的 jQuery plugin，
可以用的有很多，
像是在這幾個網頁裡都介紹了相當多的 plugin 可以使用：
25 jQuery Image Gallery/Slider Tutorials and Plugins
60+ Useful jQuery Image Slider Roundup
25 Incredible jQuery Slider Tutorials and Plugins
30 Awesome jQuery Slider and Gallery Plugins and Tutorials
後來用的是一個叫 s3Slider 的 jQuery plugin～
基本上用起來也蠻簡易的，雖然有些小問題，
但後來也都修改一下解掉～
一個比較麻煩的問題是，這一類的 slider 都是以類似的方式指定要載入的圖片，如：
<ul id=“s3sliderContent”>
<li class=“s3sliderImage”>
<img src=“image1.jpg” />
<span>Your text comes here</span>
</li>
<li class=“s3sliderImage”>
<img src=“image2.jpg” />
<span>Your text comes here</span>
</li>
<li class=“s3sliderImage”>
<img src=“image3.jpg” />
<span>Your text comes here</span>
</li>
</ul>
</div>
slider 通常會需要先將所有的圖片網址都指定好，
例如上面就先指定了 image1~3.jpg，
雖然瀏覽器會「依序」顯示每一個圖片，
但是！！瀏覽器會在看到上面的 html 碼後，就把「所有」的圖片都讀進瀏覽器裡…
有看到上面這句的問題了嗎？
是的，如果有很多張圖，或者是圖檔都很大的時候，
瀏覽器載入這些圖片的動作會非常的慢…
像我使用 Google Chrome 瀏覽器來測試的話，
如果打開開發者工具，可以觀察到 Chrome 試著同時載入網頁中所有的圖片，
會讓整個網頁的速度非常的緩慢與不順…
這個問題基本上只要 slider 的圖檔指定方式是類似上面的寫法，
應該都會發生，不只有 s3Slider 有這問題而已…
為了解決這個問題，我稍微修改了一下 s3Slider，
讓它每次只讀取「現在要顯示」與「下一張要顯示」的圖檔，
這樣子雖然在第一張圖檔顯示時，還是會稍慢一些（如果圖檔很大的時候），
但第二張後就不會有顯示緩慢的問題了～
我的作法如下：
Step 1: 圖檔的設定部分，將圖檔網址不寫在 src 而寫在 alt 屬性上：
<ul id=“s3sliderContent”>
<li class=“s3sliderImage”>
<img src=”” alt=”image1.jpg” />
<span>Your text comes here</span>
</li>
<li class=“s3sliderImage”>
<img src=”” alt=”image2.jpg” />
<span>Your text comes here</span>
</li>
<li class=“s3sliderImage”>
<img src=”” alt=”image3.jpg” />
<span>Your text comes here</span>
</li>
</ul>
</div>
Step 2: 在 s3Slider.js 的 makeSlider() 函式中，加入紅體字的部分。
基本上就是檢查現在要顯示的這張圖片，如果 src 屬性是空白的，
就從 alt 屬性複製過去，這個動作會導致瀏覽器真的去讀取圖檔。
除了對現在這張圖片作以外，也對下一張圖片作同樣的處理，
這樣子就可以將下一張圖片預先讀進瀏覽器中，
因此待會要顯示下一張圖片後，就不會延遲了～
{
current = (current != null) ? current : items[(items.length–1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo – 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
// Load current image and preload next image
$(items[currNo]).find(“img”).each(function() {
if ($(this).attr(“src”) == “”)
{
$(this).attr(“src”, $(this).attr(“alt”));
}
});
$(items[currNo+1]).find(“img”).each(function() {
if ($(this).attr(“src”) == “”)
{
$(this).attr(“src”, $(this).attr(“alt”));
}
});
if(!mOver) {
$(items[currNo]).fadeIn((myfadetimeout), function() {
if($(itemsSpan[currNo]).css(‘bottom’) == 0) {
$(itemsSpan[currNo]).slideUp((myfadetimeout), function() {
faderStat = false;
current = items[currNo];
改用上面的寫法之後，用 Chrome 的開發者工具就可以觀察到，
Chrome 一開始會載入第１與２張圖片，接著每次都載入下一張圖片，
網頁就很順暢了～
有興趣的人可以到這裡來下載我改過的 s3Slider.js 去試試看喔，
不過可以比較一下原始碼，因為我還為了我的網頁稍微改了其他的部分，
不需要的部分可以自己再用原始的 s3Slider 去修改也行～～
2 thoughts on “[jQuery] 加速 s3Slider 圖片輪播器載入圖片的效率”
good job!
great!