显示“display: none”的图像在显示前在 Firefox 中闪烁

Question

我有一系列图像，我想一次显示一个。所有其他图像都用 隐藏display: none。问题是，虽然我正在等待所有图像完成请求，但当我更改要显示的图像时，图像会闪烁。这是一个例子：

该问题仅发生在 Firefox 中。我还使用上面的示例创建了一个 JSFiddle： https: //jsfiddle.net/ofte9g5v/7/

我能够使用opacity属性实现预期的行为，但我仍然想知道为什么第一种方法不起作用，因为它是最简单的解决方案，并且也适用于所有其他浏览器。

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

Answer 1

您正在使用 JavaScript 在两个单独的调用中切换可见性；首先，更改可见图像的 CSS 样式，将其display属性设置为none。看起来 Firefox 会比其他浏览器更快地识别这一点，从而导致没有图像显示。接下来，您将其他图像之一设置为 ，提示它按预期进行绘制display。block

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

.imageContainer {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
  z-index: 1;
}

然后，当您想要显示图像时，只需将其z-index属性设置为2或更高，并将z-index所有其他图像的属性设置为1之后。