Yüksek çözünürlüklü görüntüyü arka plan firefox titremesine yükleyin

Question

İki tür görüntü içeren bir site yapıyorum (yüksek çözünürlük ve düşük çözünürlük). İlk önce düşük çözünürlüklü görüntüyü göstermek istiyorum çünkü çoğunlukla önceden önceden yüklenmiş ve eğer değilse daha hızlı yükleniyor.

Yaptığım şey, düşük resim URL'sine src ayarlı bir img oluşturdum ve daha sonra yüksek resim URL'sine src ayarlı bir javascript görüntüsü oluşturdum. Daha sonra img'nin src'sini javascript görüntüleri onLoad işlevi çağrılırken değiştirdim. (Herhangi bir kod göndermedim çünkü React'ta yazdım ve kod biraz farklıydı).

Bu, firefox dışındaki tüm tarayıcılarda düzgün çalışıyor. Kolayca src'yi değiştirmek yerine görüntü yok görüntülenen birkaç milisaniye var ve daha sonra yüksek görüntü görüntülenir. Bunun için bir çözüm olup olmadığını merak ediyorum.

Answer 1

Sorununuza bakmadan firefox'ta bir hata görünüyor.

Firkatek, görüntüyü ölçeklendirmek için gereken süreden kaynaklanıyor gibi görünüyor.

Firefox, img-src'inizi değiştirmeden önce DOM ile stilinize ekleyerek resmi doğru boyutta oluşturmaya çalışın. Belki de left:-10000px; gibi ekran dışı veya hatta doğru konumda.

Kaynaklar: o) düşük yeniden ve gösteri() her iki görüntüyü sadece çakışmasına kötü bir fikir olduğunu ve yüksek çözünürlüklü görüntü yüklendiğinde sonra (gizlersem
https://bugzilla.mozilla.org/show_bug.cgi?id=705826
https://kylekelly.com/posts/2014/04/08/firefox-flickering.html