Firefox'ta resim yüklenirken görünen kenarlık ve başlık

Question

Firefox ile ilgili bir sorunum var. Web sitemde birçok imgem var. Firefox'taki sayfalara göz atarken, resim yüklenirken kenarlık ve resim başlığı görünür. İndirme işlemi bittiğinde, bu sınır/başlık kaybolur ve bir görüntü ile değiştirilir.

Bu yalnızca firefox'ta olur. Chrome ve diğer tarayıcılar, görüntüyü herhangi bir sınırlama olmadan ve çok 'temiz' görünen başlıklar olmadan yükler. Kelimede, firefox tarafından üretilen bu sınırlar çirkin.

Bunu kaldırabilir miyim, bir yükleyici ile mi yoksa bu tür bir şeyle değiştirebilir miyim? Css yükleyicisini arka plan görüntüsü ile eklemeyi denedim: url() ... bu sınırların görünür olacağını düşünmüyorum, ancak hala oradalar.

Pinterest, dribbble ve diğerleri gibi siteler firefox'ta kenarlık üretmeden görüntüleri nasıl görüntüler?

Eğer

Answer 1

Bunu görünmemesine ayarlamak için :-moz-loading psuedo-class kullanabilirsiniz ederiz. Böyle bir şey çalışması gerekir:

img:-moz-loading { 
    visibility: hidden; 
} 

Buna bir alternatif, arka planda resim yüklemek ve bir yükleme iletişim kutusunu veya animasyon görüntüler bir AJAX yükleme komut gibi bir şeydir. Bunu yapmak için çok fazla teknik var ve burada veya Google’da arama yapmak, bunu nasıl etkin bir şekilde yapacağı konusunda pek çok sonuç getirmelidir.

Answer 2

CSS kullanarak açık bir şekilde yüklemeyi beklemenize gerek yoktur. Bunu javascript'te de yapabilirsiniz.

var img = document.getElementById("some-image"); 
    img.style.display = "none"; 
    //... 
    //add to dom etc... 
    //.. 
    img.onload = function() { 
     img.loaded = true; 
     img.style.display = "inherit"; 
    }