2種類の画像（高解像度と低解像度）を持つサイトを構築しています。低解像度画像を最初に表示したいのは、しばしば既にプリロードされていて、そうでなければ読み込みが速いからです。背景に高解像度の画像を読み込むfirefox flicker
私が行ったことは、srcが低画像URLに設定されたimgを作成し、srcが高画像URLに設定されたjavascript画像を作成したことです。私はその後、javascriptイメージのonLoad関数が呼び出されるとすぐにimgのsrcを変更しました。 （私はReactで書いたのでコードを掲載していませんし、コードは少し異なります）。
これは、Firefox以外のすべてのブラウザで問題なく動作しています。 srcをスムーズに変更する代わりに、画像が表示されずに高画像が表示される数ミリ秒があります。私はこれのための修正があるかどうか疑問に思っています。
あなたの問題をグーグルで調べることから、それはFirefoxのバグのようです。
ちらつきは、firefoxが画像を拡大縮小する必要がある時に発生しているようです。
img-srcを交換する前に、スタイルに合わせてDOMに追加することで、画像を適切なサイズでレンダリングしてみてください。 left:-10000px;のようなオフスクリーンかもしれません。
出典：
https://bugzilla.mozilla.org/show_bug.cgi?id=705826
https://kylekelly.com/posts/2014/04/08/firefox-flickering.html
"または右の位置でも" - いいえ、水平スクロールバーが表示されるためです。 "Standard"は左から離れていますが、通常は 'left：-999em;'として実行されますが、あなたはうまく動作します。 –
私はそれを試みたが、それはちらつきを止めなかった。最悪の場合は、画像がすでにキャッシュされていて、onLoad関数が呼び出されてsrcが切り替わるまで、非常に短い時間低解像度画像が表示されます。 – kjonsson
あなたは、位置とは別に、正確に同じサイズとスタイルで雇用者をプリロードしてもよろしいですか？代わりに、 'src'属性の代わりにDOM内のノード全体を置き換えることもできます。あるいは、 'position：absolute; 'をオーバーレイとして持つ兄弟ノードとして追加するだけです。 - srcを置き換えることは可能です。 – jayms
現在、私は思っています、それは悪い考えであれば、単に両方の画像を重ね合わせると、高解像度の画像がロードされたときに（非表示）低再とshow（）高解像度。 – kjonsson