Opera 11.5 图像闪烁答案

【问题标题】：Opera 11.5 image flickerOpera 11.5 图像闪烁
【发布时间】：2011-11-03 16:16:43
【问题描述】：

我有一个关于 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 引擎的问题。

然而 - 虽然我知道这是在高级水平上挑剔 - 如果有人以前遇到过这个问题并且可能知道解决方法或修复方法，我会很感兴趣？

谢谢！

【问题讨论】：

标签： jquery opera

【解决方案1】：

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

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

【讨论】：

好的，这听起来像是在解释我在调整浏览器窗口大小时将所有图像（还有显示：无；那些）缩放到全尺寸时所经历的事情，而 Opera 显然不会“重绘”隐藏元素，因此需要在 .show() 上重绘。我想我会尝试你所描述的，看看它是否有效。非常感谢！
嗯，显然 Opera 似乎太聪明了，不会被一张没有显示任何像素的图片所愚弄，所以当你真正看到图片时似乎会发生重绘（也试过这个10 秒超时）。我想我就让它这样吧......谢谢你的意见！

【解决方案2】：

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

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

真正确定的唯一方法是对有问题的两个图像（或通常是区域）使用绝对定位。它们应该在浏览器中占据相同的物理空间。然后做你的显示/隐藏。哪个具有更高的 z-index 甚至都无关紧要，新的将在显示时立即出现在最终用户面前，或者在另一个隐藏时。

【讨论】：

您好，感谢您的回答和提示。我知道您提到的定位问题，因此这不会导致问题。不幸的是，我无法在 jsfiddle:jsfiddle.net/YqN4X/2 中重现错误，这似乎适用于所有浏览器。我在最初所指的页面中所做的事情也将图像缩放到完整的浏览器大小，所以我想这可能真的是缩放图像时的性能问题。在这种情况下，我还看到“逐行”（不是真的）生成的图像。

【解决方案3】：

我已经解决了一个 Opera 闪烁问题（在加载新的 html 页面时），方法是将所有

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

页面中<head> 之后的行。

如果放在之前 </head> （或低于任何 html 行或标签），页面将在加载时闪烁。

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

【讨论】：