javascript - 带有 "display: none"的图像在显示前在 Firefox 中闪烁

Question

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

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

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

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

Answer 1

问题似乎是 Firefox 在图像进入视口(viewport)之前不会对其进行解码。因此，在您将所选图像设置为 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';
})