在背景Firefox闪烁中加载高分辨率图像

Question

我正在建立一个包含两种图像（高分辨率和低分辨率）的网站。 我想先显示低分辨率图像，因为通常它已经被预加载了，如果没有，那么加载起来会更快。

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

这在除Firefox之外的所有浏览器上都能正常工作。 而不是平滑地更改src，而是有几毫秒的时间不显示任何图像，然后显示高图像。 我想知道是否有针对此的修复程序。

Answer 1

从谷歌搜索您的问题，似乎是Firefox中的错误。

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

尝试在交换img-src之前，通过使用样式将Firefox添加到DOM中，使Firefox以正确的大小呈现图像。 也许像left:-10000px;屏一样离屏left:-10000px; 甚至是正确的位置

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