javascript - 在背景 firefox 闪烁中加载高分辨率图像

Question

我正在构建一个包含两种类型图像(高分辨率和低分辨率)的网站。我想先显示低分辨率图像，因为它通常已经预加载，如果没有，加载速度会更快。

我所做的是创建一个 img 并将 src 设置为低图像 url，然后创建一个 javascript 图像并将 src 设置为高图像 url。然后，我在调用 javascript 图像 onLoad 函数后立即更改了 img 的 src。 (我没有发布任何代码，因为我是用 React 编写的，代码略有不同)。

这在除 firefox 之外的所有浏览器上都可以正常工作。不是平滑地更改 src，而是有几毫秒没有显示图像，然后显示高图像。我想知道是否有解决此问题的方法。

Answer 1

通过谷歌搜索你的问题，它似乎是 firefox 中的一个错误。

闪烁似乎是由 firefox 需要缩放图像的时间引起的。

在交换 img-src 之前，尝试通过将图像添加到具有样式的 DOM 来使 firefox 以正确的大小呈现图像。可能像 left:-10000px; 这样在屏幕外，甚至在正确的位置。

来源:
https://bugzilla.mozilla.org/show_bug.cgi?id=705826
https://kylekelly.com/posts/2014/04/08/firefox-flickering.html