javascript - 显示前在 Firefox 中闪烁“显示：无”的图像

Question

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

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

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

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

标签： javascriptcssfirefox

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之后。