2013-03-22 12 views
8

Ich möchte einen Preloader auf meiner Website zeigen, bevor der Inhalt geladen wird, aber wenn ich ein animiertes preloader Bild mit transparentem Hintergrund wählen, sehen die Kanten sehr gezackt aus. Wie ändere ich das Bild oder gibt es einen Weg, um einen transparenten Hintergrund für animierte Gifs zu haben?Animierte transparente preloader Bild über einen einfarbigen Hintergrund

Ich verwende die preloaders von preloader.net

Antwort

9

Die erste und wahrscheinlich einfachste Option, die Sie haben, ist spin.js zu verwenden. „Es erstellt dynamisch Spinnaktivitätsindikatoren, die als auflösungsunabhängige Ersatz für AJAX Laden GIFs verwendet werden kann.“


Wenn ein Skript ist keine Option oder wollen Sie einen anderen Spinner haben Sie muss eine .gif-Datei ohne Anti-Aliasing erstellen, die größer ist als das zu verwendende Zahlenfeld, und es mit html skalieren.

Original-spinner anti-aliased (hässlicher Rand auf nicht weißen Hintergrund):

Spinner anti-aliased

Original-spinner ohne Kanten (ohne Anti-Aliasing, daher hat es eine pixelierte Flanke):

Aber wenn diese Spinner verkleinert wird, sieht es schön:

Seien Sie sicher, dass es auch in älteren IEs hübsch aussehen verwenden

img { 
    -ms-interpolation-mode:bicubic; 
} 

zu machen.