旋轉的圖像導致奇怪的閃爍

我想旋轉一些圖像。除非我在某些轉換中出現奇怪的「閃爍」，否則很有用。任何建議我做錯了什麼？謝謝旋轉的圖像導致奇怪的閃爍

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<title>Testing</title> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 

<style type="text/css"> 
#test img {position: absolute;right: 0;top: 0;} 
#test img:last-child {display: none;} 
</style> 

<script> 
function rotateImage() 
{ 
    var $images=$('#test img'); 
    $images.eq(1).attr({src : files[index]}); 
    $images.eq(0).fadeOut(1000); 
    $images.eq(1).fadeIn(1000, function() 
    { 
     $images.eq(0).attr('src', files[index]); 
     $images.eq(0).show(); 
     $images.eq(1).hide(); 
     if (index == files.length-1){index = 0;}else{index++;} 
    }); 
} 
var index=1,files=['f1.jpg','f2.jpg','f3.jpg']; 
setInterval(rotateImage, 2000); 
</script> 
</head> 

<body> 
<div id="test"><img src="f1.jpg" alt="" /><img src="f1.jpg" alt="f1.jpg" /></div> 
</body> 
</html>

來源

2012-01-16 user1032531

一切工作正常，我：http://jsfiddle.net/SeL3M/。 Bug可能與圖片加載有關。嘗試在使用前預載圖像。 – 2012-01-16 16:50:42

感謝kdzwinel，您的jsfiddle示例使用FF9.01/Windows定期顯示閃爍。 IE8/Windows似乎沒有閃爍。 – user1032531 2012-01-16 17:07:58

閃爍在指數1，因爲這個

$images.eq(1).fadeIn(1000, function() 
    { 
     $images.eq(0).attr('src', files[index]); 
     $images.eq(0).show(); 
     $images.eq(1).hide(); 
     if (index == files.length-1){index = 0;}else{index++;} 
    } 
);

圖像的fadeIn之後發生的事情，源在索引0處設置爲圖像，並立即顯示。這導致閃爍。

你必須做的是交換圖像。

$images.eq(1).fadeIn(1000, function() 
{ 
    $images.eq(0).remove().appendTo('#test'); // swaps the image indices 
    if (index == files.length-1){index = 0;}else{index++;} 
});

演示，請參閱：http://jsfiddle.net/diode/SeL3M/4/

來源

2012-01-16 21:02:51 Diode