Voglio mostrare un preloader sul mio sito Web prima che il contenuto venga caricato, Tuttavia quando scelgo un'immagine di preloader animata con sfondo trasparente i bordi appaiono molto frastagliati. Come posso modificare l'immagine o c'è un modo per avere uno sfondo trasparente per le gif animate?Immagine preloader trasparente animata su uno sfondo a tinta unita
Sto usando le preloaders da preloader.net
Il primo e probabilmente più semplice opzione che avete è quella di utilizzare spin.js. “Si crea dinamicamente indicatori di attività di filatura che possono essere utilizzate come ricambio indipendente dalla risoluzione per GIF AJAX di carico.”
Se uno script non è un'opzione o se si desidera avere un filatore diverso voi devi creare un file .gif senza anti-aliasing che sia più grande dello spinner che vuoi usare e ridimensionarlo con html.
filatore originale anti-aliasing (bordo brutto su sfondo non bianco):
filatore originale senza bordi (senza anti-aliasing, quindi ha un bordo pixel):
Ma se questo filatore viene ridimensionato, sembra bello:
Assicurarsi di utilizzare
img {
-ms-interpolation-mode:bicubic;
}
per renderlo anche guardare piuttosto in IE più anziani.