Rand und Titel während des Ladens von Bildern in Firefox

Question

Ich habe ein Problem mit Firefox. Auf meiner Website habe ich viele Bilder. Wenn ich in Firefox die Seiten durchblättere, werden Rahmen und Bildtitel angezeigt, während das Bild geladen wird. Sobald der Download beendet ist, verschwindet dieser Rahmen/Titel und wird durch ein Bild ersetzt.

Dies geschieht nur in Firefox. Chrome und andere Browser laden Bilder ohne Ränder und Titel, die viel "sauberer" aussehen. In Worten sind diese von Firefox erzeugten Grenzen hässlich.

Kann ich das entfernen, durch einen Lader oder etwas dieser Art ersetzen? Ich habe versucht, css loader mit background-image hinzuzufügen: url() ... denke, dass diese Grenzen nicht sichtbar sein werden, aber sie sind immer noch da.

Wie liefern Websites wie pinterest, dribbble und andere Bilder ohne Rand in Firefox?

Danke

Answer 1

Sie die :-moz-loading psuedo-class es erscheint nicht einstellen können, um. So etwas sollte funktionieren:

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

Eine Alternative dazu so etwas wie ein AJAX Laden Skript, das das Bild im Hintergrund geladen wird und einen Lade Dialog oder eine Animation angezeigt werden soll. Dafür gibt es viele Techniken. Die Suche hier oder bei Google sollte viele, viele Ergebnisse hervorbringen, wie dies effektiv durchgeführt werden kann.

Answer 2

Sie müssen nicht explizit auf Laden mit CSS warten. Sie können dies auch in Javascript tun.

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