旋转的图像导致奇怪的闪烁

问题描述：

我想旋转一些图像。除非我在某些转换中出现奇怪的“闪烁”，否则很有用。任何建议我做错了什么？谢谢旋转的图像导致奇怪的闪烁

<!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>

一切工作正常，我：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/

答

尝试使用jquery cycle插件。有一个很好的褪色

谢谢eiu165。我也想弄清楚它为什么闪烁。 – user1032531 2012-01-16 17:02:35

答

它在Firefox中显示和隐藏元素之间添加一个小的时间延迟（我已经在jsfiddle中使用fadeIn(100, function()来完成），它工作正常。

http://jsfiddle.net/SeL3M/

旋转的图像导致奇怪的闪烁

相关推荐