Javascript image rotator在較舊的瀏覽器中速度較慢

Question

我用javascript創建了一個簡單的圖像旋轉器，但它對於「較舊的瀏覽器」（例如IE 6,7和8）速度較慢。圖像將首先加載我認爲，然後啓動旋轉器..一些技巧，使其更快？

爲什麼我自己創造了一個旋轉器？我發現的所有旋轉器都會剪切（剪切）圖像。我需要完整的圖像......必要時有一些空白左/右或上/下。

JavaScript部分：

//Loop through pictures 
var tid = setInterval(mycode, 3000); 
function mycode() { 

    if($.random(0,1) == 1){ 
     //Fade 
     $('#alleplaatjes img.active').fadeOut(500,function(){ 
      $(this).removeClass(); 

      if($(this).next().length == 0){ 
       $('#alleplaatjes img').first().fadeIn(500); 
       $('#alleplaatjes img').first().addClass('active'); 
      } else { 
       $(this).next().fadeIn(500); 
       $(this).next().addClass('active'); 
      } 
     }); 
    } else { 
     //Slide 
     $('#alleplaatjes img.active').slideUp(500,function(){ 
      $(this).removeClass(); 

      if($(this).next().length == 0){ 
       $('#alleplaatjes img').first().slideDown(500); 
       $('#alleplaatjes img').first().addClass('active'); 
      } else { 
       $(this).next().slideDown(500); 
       $(this).next().addClass('active'); 
      } 
     }); 
    } 
}; 

PHP部分：

<?php 

$dir = "/home/zwuq/domains/***/public_html/afbeelding/"; 
foreach(glob($dir."*") as $file){ 
    $afbeelding = 'afbeelding/'.str_replace($dir, '', $file); 
    $toevoeging = FALSE; 
    if(!$eerste_plaatje){ 
     $toevoeging = ' class="active"'; 
     $eerste_plaatje = $afbeelding; 
    } 
    $plaatjes .= '<img'.$toevoeging.' src="'.$afbeelding.'" style="max-width: 99%; max-height: 99%;">'; 
} 

?> 

HTML部分：

<div id="alleplaatjes" style="width:100%; height:100%; margin:0px; padding:0px; z-index:1; text-align: center;"> 
    <? echo $plaatjes; ?> 
</div> 

Answer 1

一個建議是不要用setInterval。如果操作時間過長（在您的情況下，超過3秒），累計的延遲將導致您的動畫變得更糟。

要嘗試我的建議，只需撥打setTimeout而不是setInterval，然後在mycode的末尾再次調用setTimeout。理想情況下，您會跟蹤您的函數被調用的時間，並調整傳遞給下一個超時的時間間隔。

爲了在此處獲得StackOverflow的最佳結果，在http://jsfiddle.net上發佈示例會讓其他人現場看到問題，並可能幫助我們幫助您。

另一個建議

緩存您的jQuery對象。例如，而不是：

$(this).removeClass(); 
    if($(this).next().length == 0){ 
     $('#alleplaatjes img').first().fadeIn(500); 
     $('#alleplaatjes img').first().addClass('active'); 
    } else { 
     $(this).next().fadeIn(500); 
     $(this).next().addClass('active'); 
    } 

你應該有

// prepending jquery variables with $ to distinguish them 
    var $this = $(this), 
     $next = $this.next(); 
    $this.removeClass(); 

    if($next.length == 0){ 
     var $first = $('#alleplaatjes img').first(); 
     $first.fadeIn(500); 
     $first.addClass('active'); 
    } else { 
     $next.fadeIn(500); 
     $next.addClass('active'); 
    }