[jQuery] 加速 s3Slider 圖片輪播器載入圖片的效率

[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 都是以類似的方式指定要載入的圖片,如:  

<div id=“s3slider”>
   <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 屬性上: 

<div id=“s3slider”>
   <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 屬性複製過去,這個動作會導致瀏覽器真的去讀取圖檔。

除了對現在這張圖片作以外,也對下一張圖片作同樣的處理,

這樣子就可以將下一張圖片預先讀進瀏覽器中,

因此待會要顯示下一張圖片後,就不會延遲了~

 

var makeSlider = function()
{          
    current = (current != null) ? current : items[(items.length1)];
    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 一開始會載入第1與2張圖片,接著每次都載入下一張圖片,

網頁就很順暢了~

 

有興趣的人可以到這裡來下載我改過的 s3Slider.js 去試試看喔,

不過可以比較一下原始碼,因為我還為了我的網頁稍微改了其他的部分,

不需要的部分可以自己再用原始的 s3Slider 去修改也行~~

(本頁面已被瀏覽過 73 次)

One thought on “[jQuery] 加速 s3Slider 圖片輪播器載入圖片的效率

發表迴響

你的電子郵件位址並不會被公開。