Gemessenes Bild - HTTP-Anforderung

Bitte öffnen Sie die Testseite in einem gängigen Browser und zeigen Sie die HTTP-Anfrage in Fiddler an.

1. Bild ausblenden
<img src="1.jpg" style="Anzeige: keine" />Test: test_1.html
Fazit: Nur Opera generiert keine Anfragen.
Hinweis: Das Ausblenden eines Bildes mit „Sichtbarkeit: versteckt“ erzeugt auch eine Anfrage in Opera.

2. Bilder wiederholen
<img src="1.jpg" /><img src="1.jpg" />Test: test_2.html
Fazit: Alle Browser stellen nur eine Anfrage.

3. Wiederholender Hintergrund
<style type="text/css"> .test1 { Hintergrund: url(1.jpg) } .test2 { Hintergrund: url(1.jpg) }</style><div class="test1">test1</div><div class="test2">test2</div>Test: test_3.html
Fazit: Alle Browser stellen nur eine Anfrage.

4. Hintergrund nicht vorhandener Elemente
<style type="text/css"> .test1 { background: url(1.jpg) } .test2 { background: url(2.jpg) } /* Auf der Seite gibt es kein Element mit der Klasse test2*/</style><div class="test1">test1</div>Test: test_4.html
Fazit: Der Hintergrund generiert nur dann eine Anfrage, wenn das angewendete Element auf der Seite vorhanden ist. Dies ist für CSS-Frameworks sinnvoll.

5. Den Hintergrund eines Elements ausblenden
<style type="text/css"> .test1 { Hintergrund: url(1.jpg); Anzeige: keine; } .test2 { Hintergrund: url(2.jpg); Sichtbarkeit: verborgen; }</style><div class="test1">test1</div>Test: test_5.html
Fazit: Opera und Firefox generieren keine HTTP-Anfragen für mit „display: none“ ausgeblendete Elementhintergründe. Hintergrundbilder werden nur angefordert, wenn diese Elemente nicht angezeigt werden: keine.

6. Mehrere Hintergründe
<style type="text/css"> .test1 { Hintergrund: url(1.jpg); } .test1 { Hintergrund: url(2.jpg); }</style><div class="test1">test1</div>Test: test_6.html
Fazit: Mit Ausnahme von Safari und Chrome, die auf der WebKit-Rendering-Engine basieren, fordern andere Browser nur ein Hintergrundbild an.
Hinweis: WebKit-Browser fordern alle Hintergrundbilder an, da sie in CSS3 mehrere Hintergrundbilder unterstützen.

7. Hover-Hintergrund wird geladen
<style type="text/css"> a.test1 { Hintergrund: url(1.jpg); } a.test1:hover { Hintergrund: url(2.jpg); }</style><a href="#" class="test1">test1</a>Test: test_7.html
Fazit: Beim Auslösen des Hover wird der Hintergrund im Hover-Zustand abgefragt. Dies kann zu Flackern führen, daher wird es häufig im selben Hintergrundbild platziert und umgedreht.
Hinweis: Wenn für Bilder kein Cache vorhanden ist, generiert der IE bei jeder Änderung des Hover-Status eine neue Anfrage. Sehr schlecht.
Ergänzung vom Abend des 13.05.2009: Die obige Erklärung ist falsch. Eine genauere Erklärung finden Sie in der Folge. Bei der Flip-Technik handelt es sich um die Sprite-Technologie, Beispiel: test_7b.html, die unter IE6 kein Flackern verursacht.

8. Bilder in innerHTML in JS
el.innerHTML = '<img src="1.jpg" />'; //document.body.appendChild(el); </script> Test: test_8.html
Fazit: Nur Opera fordert Bilder nicht sofort an.
Hinweis: Opera sendet die Anfrage nur, wenn sie zum DOM-Baum hinzugefügt wird.

9. Bildvorladen
Am häufigsten wird die JS-Lösung verwendet:

1. Opera generiert keine Anfragen für versteckte Bilder und Hintergründe versteckter Elemente.
2. Firefox generiert auch keine Anfragen für den Hintergrund versteckter Elemente.
3. Opera generiert keine Anfragen für img-Elemente, die noch nicht in den DOM-Baum eingefügt wurden.
4. Safari und Chrome basieren auf der WebKit-Engine und unterstützen mehrere Hintergrundbilder.
5. In anderen Szenarien bleiben alle wichtigen Browser konsistent.
Wenn es um die Bearbeitung von Bildanfragen geht, liegt Opera meiner persönlichen Meinung nach ganz vorne.

Extra

1. Wenn Sie Fiddler zur Überwachung von Opera verwenden und es sich um einen lokalen Server handelt, müssen Sie den lokalen Server in den Proxyservereinstellungen von Opera überprüfen.

2. Eine weitere narrensichere Möglichkeit, die Anzahl der HTTP-Anfragen zu überprüfen, besteht darin, direkt die Apache-Datei access.log zu überprüfen.

3. Mein Firefox generiert doppelte Anfragen für wiederholte Bilder und wiederholte Hintergründe. Habe alle Erweiterungen deaktiviert, das Problem besteht weiterhin. Wenn jemand die Einzelheiten kennt, lassen Sie es mich bitte wissen.