Bordo e titolo visualizzati durante il caricamento dell'immagine in Firefox

Question

Ho un problema con firefox. Sul mio sito ho molte immagini. Quando sfoglio le pagine di Firefox, il titolo dell'immagine e del bordo è visibile durante il caricamento dell'immagine. Una volta completato il download, questo bordo/titolo scompare e viene sostituito con un'immagine.

Questo succede solo in Firefox. Chrome e altri browser caricano immagini senza bordi e titoli che sembrano molto più 'puliti'. A parole, questi bordi prodotti da firefox sono brutti.

Posso rimuoverlo, sostituire con un caricatore o qualcosa del genere? Ho provato ad aggiungere css loader con background-image: url() ... pensando che questi confini non saranno visibili, tuttavia sono ancora lì.

In che modo siti come pinterest, dribbble e altri offrono immagini senza produrre bordi in firefox?

Grazie

Answer 1

È possibile utilizzare il :-moz-loading psuedo-class per impostarlo a non appare. Qualcosa del genere dovrebbe funzionare:

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

Un'alternativa a questo è qualcosa di simile a uno script di carico AJAX, che caricherà l'immagine in background e visualizzare una finestra di caricamento, o l'animazione. Ci sono molte tecniche per farlo, e la ricerca qui o su Google dovrebbe richiedere molti molti risultati su come farlo in modo efficace.

Answer 2

Non è necessario attendere esplicitamente il caricamento tramite CSS. Puoi farlo anche in javascript.

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