2016-04-24 8 views
-2

Wenn ich die Idee von Sprites richtig verstehe, ist es beabsichtigt, HTTP-Anfragen zu reduzieren. Es macht Sinn, wenn ich <span>, <i> oder <div> verwende, da ich mehrere Elemente eine Klasse geben kann und geben Sie diese Klasse background-image. Auf diese Weise fordert der Browser das Bild nur einmal an. Aber wie funktioniert das mit Img-Tag? Das src-Attribut kann nicht leer sein, also wenn ich gesetzt drei Bilder wie folgt aus:Sprite mit <img> tag

<img id="first" src="img-sprite.png" alt="" /> 
<img id="second" src="img-sprite.png" alt="" /> 
<img id="third" src="img-sprite.png" alt="" /> 

Im Grunde habe ich drei verschiedene Anfragen hier. Drei Anfragen, die das gleiche Bild anfordern, aber immer noch drei. Kann mir bitte jemand aufklären.

Danke!

+2

Der Browser ist intelligent genug, um nur eine Anforderung zu machen und das gleiche Bild wiederverwenden. – JJJ

+0

Ich wünschte, es gäbe eine Option zu sehen, warum Leute eine Frage ablehnen, ich würde wirklich gerne wissen, was mit meiner Frage nicht stimmt. Wie auch immer, danke @Juhana – Avishay28

Antwort

0

Bild-Sprites werden in zahlreichen Web-Apps verwendet, in denen mehrere Bilder verwendet werden. Anstatt jedes Bild als separate Bilddatei zu verwenden, ist es wesentlich speicher- und bandbreitenfreundlicher, sie als einzelnes Bild zu senden, sodass die Anzahl der HTTP-Anforderungen reduziert wird.

Implementing image sprites in CSS