Jquery Opera 11.5图像闪烁

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

我正在做的事情如下。我有几张照片：

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

当我在构建页面之前等待加载所有图像时，这将创建一个从一张图片到下一张图片的不明显过渡。这在Chrome、Safari、Firefox和IE中都能很好地工作。然而，在Opera中，我有一段相当长的时间（可能是1/4秒）可以看到（黑色）的背景。 我也试过这样做：

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

但没什么区别，所以我想这是Opera引擎的问题

然而——虽然我知道这是对高级水平的吹毛求疵——如果有人以前遇到过这种情况，并且可能知道解决方法或修复方法，我会很感兴趣

---

谢谢

这似乎很奇怪，我猜这与您的实现细节有关。可以创建一个显示问题的JSFIDLE吗

不过，一般来说，使用

hide（）…show（）

（或其他方法）可能会引起明显的副作用。当某些内容被隐藏时，整个布局可能会随着其余可见元素占用现在可用的空间而更改，然后在显示下一幅图像时再次更改。这些事件是实时发生的，因此，无论您的用户使用什么环境，您都希望事情发生得足够快，以实现无缝过渡

---

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

这似乎很奇怪，我猜这与您的实现的细节有关。可以创建一个显示问题的JSFIDLE吗

不过，一般来说，使用

hide（）…show（）

（或其他方法）可能会引起明显的副作用。当某些内容被隐藏时，整个布局可能会随着其余可见元素占用现在可用的空间而更改，然后在显示下一幅图像时再次更改。这些事件是实时发生的，因此，无论您的用户使用什么环境，您都希望事情发生得足够快，以实现无缝过渡

---

唯一能真正确定的方法是对所讨论的两个图像（或通常是区域）使用绝对定位。它们应该在浏览器中占据相同的物理空间。然后做你的展示/隐藏。实际上，哪一个具有更高的z索引并不重要，或者新的z索引将在显示时立即显示给最终用户，或者，当另一个浏览器被隐藏时，Opera有一种不同的处理方式和时间，当它刷新/呈现在JavaScript中所做的更改时——基本上它试图比其他浏览器更快地更新JavaScript更改。请参阅Opera开发文章。虽然我很惊讶你会注意到这种变化。这可能是由于您的开发机器的速度，加上图像的大小、显示驱动程序等。它在其他机器上做什么？其他版本的歌剧呢

---

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

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

---

根据您的布局，您可以尝试将第二个图像放置在第一个图像下方（通过z索引），然后显示（）第二个图像（即使此时仍将覆盖该图像），然后隐藏（）第一个图像，然后显示下方的第二个图像。

我通过放置所有

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

页面中直接位于

后面的行

如果刚好放在

（或者在html的任何行或标记下），页面在加载时会闪烁

---

如果所有Javascript都放在

之后，页面将不会闪烁。

我已通过放置所有Javascript解决了Opera闪烁问题（加载新html页面时）

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

页面中直接位于

后面的行

如果刚好放在

（或者在html的任何行或标记下），页面在加载时会闪烁

---

如果所有Javascript都放在

后面，页面将不会闪烁。

您好，谢谢您的回答和提示。我知道您提到的定位问题，因此这不应导致问题。不幸的是，我无法在jsfiddle中重现这个错误：它似乎在所有浏览器中都能工作。我在我所指的页面中所做的，最初我也会将图像缩放到全浏览器大小，所以我想这可能真的是缩放图像时的性能问题。在本例中，我还看到图像是“一行一行”（不是真的）生成的。您好，谢谢您的回答和提示。我知道您提到的定位问题，因此这不应导致问题。不幸的是，我无法在jsfiddle中重现这个错误：它似乎在所有浏览器中都能工作。我在我所指的页面中所做的，最初我也会将图像缩放到全浏览器大小，所以我想这可能真的是缩放图像时的性能问题。我还看到图像是由“line by l”生成的