Question

我在Opera中有一个关于基于jQuery的幻灯片的小问题。

我正在做的是以下内容。我有几张照片：

<div id="bg">
<img src="..." />
<img src="..." />
...
</div>

在JS中我正在做以下事情：

$('#bg img:visible').hide().next().show();

当我等待在构建页面之前加载所有图像时，这应该会创建从一张图片到下一张图片的不明显过渡。这在Chrome，Safari，Firefox和IE中完美运行。然而，在Opera中我有一段很长的时间（可能是1/4秒），我看到（黑色）背景闪耀。我也尝试过这样做：

$('#bg img:visible').next().show().prev().hide();

但它没有任何区别，所以我猜这是Opera引擎的问题。

然而 - 虽然我知道这是一个先进水平的挑选 - 如果有人之前遇到过这个问题我可能会感兴趣并且可能知道解决方法或解决方法吗？

谢谢！

Answer 1

这看起来很奇怪，我猜它与你的实现细节有关。可以创建一个显示问题的jsfiddle吗？

但一般情况下，使用hide()...show()（或其他方式）可能会导致明显的副作用。当隐藏某些内容时，整个布局可能会随着剩余的可见元素消耗现在可用的空间而更改，然后在显示下一个图像时再次更改。这些事件是实时发生的，因此您可以在用户碰巧使用的任何环境中快速发生事情，从而实现无缝过渡。

真正确定的唯一方法是对所讨论的两个图像（或通常是区域）使用绝对定位。它们应该占用浏览器中的相同物理空间。然后做你的表演/隐藏。哪一个具有更高的z-index实际上并不重要，要么新的一个在显示时立即显示给最终用户，要么一旦另一个被隐藏。

Answer 2

Opera在回流/渲染JavaScript中所做的更改时有不同的处理方式和时间 - 基本上它试图比其他浏览器更快地更新JavaScript更改。请参阅Opera dev文章中的Efficient JavaScript。虽然我很惊讶你注意到了这种变化。这可能是由于您的开发机器的速度加上图像的大小，显示驱动程序等。它在其他机器上做了什么？那么其他版本的Opera呢？

根据您的布局，您可以尝试将第二个图像放在（通过z-index）第一个，然后显示（）第二个（即使此时仍会被覆盖），然后隐藏（）第一个然后它将显示下面的第二个。

Answer 3

我通过放置所有

解决了Opera闪烁问题（在加载新的html页面时）

<script type="text/javascript" .....></script>

直接在页面<head>之后的行。

如果只放在之前 </head> （或者在任何行的html行或标记下方），页面在加载时会闪烁。

如果所有Javascript都放在<head>之后，页面就不会闪烁。

Opera 11.5图像闪烁

3 个答案: