Javascript 带“的图像；显示：无“；在显示之前在Firefox中闪烁

我有一系列的图像，我想一次显示一个。所有其他图像都隐藏在

显示：none

中。问题是，虽然我正在等待所有图像完成请求，但当我更改要显示的图像时，图像会闪烁。以下是一个例子：

这个问题只发生在Firefox中。我还使用上面的示例创建了一个JSFIDLE：

我使用

opacity

property实现了预期的行为，但我仍然想知道为什么第一种方法不起作用，因为它是最简单的解决方案，并且在所有其他浏览器中也能起作用

---

编辑：我忘了提到图像只有在第一次加载时才会闪烁。

您使用JavaScript在两个单独的调用中切换可见性；首先，更改可见图像的CSS样式，将其

display

属性设置为

none

。看起来Firefox比其他浏览器更快地捕捉到了这一点，从而没有显示任何图像。接下来，在另一幅图像上将

显示设置为
块
，提示按预期绘制

通常，当您想要在这样的图像之间切换时，需要使用CSS堆叠图像，以防止这些不必要的效果。转换组是处理隐藏、转入、可见和转出之间的转换状态的有用工具。在这种情况下，您可以使用一些CSS：

.imageContainer{
位置：相对位置；
宽度：100%；
垫底：100%；
}
.img{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
对象匹配：覆盖；
z指数：1；
}

然后，当您想要显示图像时，只需将其上的
z-index
属性设置为
2
或更高，然后将所有其他图像上的
z-index
属性设置为
1
。
作为替代方法，如果您需要将可见图像设置为
位置：相对我做的是设置可见性：隐藏；位置：绝对位置在非活动图像上，并且
可见性：可见；位置：相对位置在活动图像上。
如果先显示图像，然后隐藏其他图像，会怎么样？使您的javascript如下：$（$（'img'）[this.value]）.show（）$（'img'）.hide（）；这是一个有趣的解决方案，我将尝试一下。我不认为这个问题与Firefox的绘制速度有关。该问题仅在第一次渲染图像时发生。如果你一直切换它们，它们就会停止闪烁。如果图像已经显示并且被浏览器缓存，它们也不会闪烁。