显示前在 Firefox 中闪烁“显示：无”的图像答案

【问题标题】：Images with "display: none" blinking in Firefox before displaying显示前在 Firefox 中闪烁“显示：无”的图像
【发布时间】：2020-01-02 23:03:44
【问题描述】：

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

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

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

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

【问题讨论】：

如果先显示图像然后隐藏其他图像怎么办？让你的javascript像这样： $($('img')[this.value]).show(); $('img').hide();

标签： javascript css firefox

【解决方案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。

【讨论】：

这是一个有趣的解决方案，我会试一试。我不认为这个问题与 Firefox 的绘画速度有关。该问题仅在您第一次渲染图像时发生。如果你继续切换它们，它们就会停止闪烁。如果图像已经显示并且被浏览器缓存，它们不会闪烁。

【解决方案2】：

作为替代方案，如果您需要可见图像为position: relative;，我所做的就是在非活动图像上设置visibility:hidden; position: absolute;，在活动图像上设置visibility: visible; position: relative;。

【讨论】：

【解决方案3】：

问题似乎是 Firefox 在图像位于视口内之前不会对图像进行解码。因此，在您将选定的图像设置为display: block; 并将其他图像设置为display: none 之后，Firefox 解码选定的图像时会出现不显示图像的时刻。

我找到的解决方案是在更改其显示之前decode() 图像：

selectedImage.decode().then(() => {
    for (var i = 0; i < unselectedImages.length; i++) {
        unselectedImages[i].style.display = 'none';
    }
    selectedImage.style.display = 'block';
})

【讨论】：