Wird bei background-image das gesamte Bild geladen oder nur der sichtbare Teil?

Question

Ich habe eine kleine Animation mit Javascript und CSS. Ich habe eine Sprite-Png-Datei, bestehend aus 24 Frames, und setzen Sie dieses Bild als Hintergrundbild in div, die Höhe und Breite von einem Frame hat.

Wenn die Animation beginnt, ändert die Javascript-Funktion die Werte für die Hintergrundposition, so dass wir alle 6 Millisekunden das nächste Bild sehen.

Die Animation ist flüssig, aber ich teste alles auf dem lokalen Server, daher kann ich nicht sagen: Lädt das Hintergrundbild das ganze Bild oder nur den sichtbaren Teil?

Was ich meine, ist, ist das ganze Bild vorgeladen, oder einige Browser, irgendwie, laden Sie nur einen Teil der png, die sichtbar ist und nicht vorladen Rest? Wenn das der Fall ist, werde ich das Bild auf eine andere Weise vorladen.

Weiß das jemand?

Answer 1

Es wird zunächst das gesamte Bild geladen.

Ihr CSS stellt eine HTTP-Anfrage für diese Datei, und dann stylt Ihr CSS die Position dieses Bildes.

Ich glaube, einer der Vorteile eines Sprites ist, dass nur eine HTTP-Anfrage gestellt wird, die dann verwendet wird, um verschiedene Grafiken je nach Positionierung anzuzeigen.

Weitere Einzelheiten finden Sie in diesem Artikel:

http://css-tricks.com/158-css-sprites/

Die Idee war, dass der Computer eine Grafik in den Speicher holen konnte, und dann jeweils nur Teile dieses Bildes anzuzeigen, was schneller war als als ständig neue Bilder abrufen zu müssen.