Question

对于我目前正在构建的网站，我想将循环图像用于一个部分（IE在一个容器中交叉淡入淡出一系列图像。）因为这对我来说主要是一个学习过程，我正在编写大部分的javascript和jQuery我自己而不是使用预建插件。

在所有桌面浏览器上，循环完美地运行（据我所知），但在iOS设备上测试时，每当某个部分开始循环到新图像时，我都会闪烁。

基本上，有三个函数看起来像这样：

function cycleTheatrical(){
   setTimeout(function(){
    (theatPos < (theatArray.length-1)) ? theatPos+=1 : theatPos = 0;
    $('#page-1-theatrical').append("<img src='" + theatArray[theatPos] + "' class='project-img' style='display:none'>");
    $('#page-1-theatrical img:last-child').fadeIn(1500, function(){
    $('#page-1-theatrical img:first').remove();
    });
    cycleHomeEnt();
}, 3000);
};

所以我试图做的是用display:none附加新图像，然后将其淡入旧图像。一旦淡入，回调函数就删除了旧图像。

在iOS设备中查看时，我看到新图像的短暂闪烁，只有一秒钟，然后消失并且正常发生交叉淡入淡出。我的第一个假设是display:none直到图像设置完成后才开始设置，所以我构建了一个备用版本，它附加了一个没有源设置为display:none的图像，然后添加了一个源（使用） .attr（））在做淡入淡出之前，但问题仍然和以前一样。

那么有谁知道是什么原因导致iOS设备短暂闪烁？您可以在此处查看WIP网站，以查看我在说什么：

http://www.thecrpgroup.com/crpweb/promo-site/

感谢您的帮助！

Answer 1

我不知道为什么这是必需的，但我确实找到了答案。使用它之后，我将问题分解为fadeIn（）调用。这让我缩小了搜索范围，我发现了这个：

Jquery when FadeIn() the Object it blinks,Ipad safari

事实证明，用fadeTo（）替换fadeIn（）解决了这个问题。

jQuery图像循环在iOS设备上闪烁

1 个答案: