Opened by rosti at 2023-04-18 10:56
User since
2011-01-27
441 Artikel
BenutzerIn
![[Homepage]](/battie/theme/default/homepage.gif)
2011-01-27
441 Artikel
BenutzerIn
Hallo, sehr interessant, ich habe mir dein Contigous Load mal näher angesehen, getestet und auch mit anderen Varianten verglichen.
Schau dir mal das hier an:
https://tests.itjh.de/lazy-loading-images/
Test 1 ist ohne irgendwelche Lazy loadings und braucht ca. 500ms bis die Seite geladen ist.
Test 2 ist lazy loading vom Browser mit dem Attribute loading="lazy" i img Element. braucht nur ca. 100ms. Und ich sehe da kein Flackern, es fällt mir zumindest nix auf. Die Höhe der Bilder ist auch nicht fest, nur die Breite über dem div content.
Test 3 habe ich mir von https://web.dev/lazy-loading-images/ abgeschaut und braucht 220ms. mit placeholder-image.
Test 4 ist deine Lösung, und hier wird nichts nachgeladen, sondern die Ladezeit der Bilder zählt zu der gesamten Ladezeit der Webseite. Sie braucht somit bei mir im Browser ca. 1,3 Sekunden.
Zusätzlich habe ich auch das Event DOMContentLoaded eingebunden und erst dann seqLoad ausgeführt:
Sonst hat er bei dem Vergleich noch keine img Elemente gefunden und ich bekam: "Die Anzahl der Bilder passt nicht zur Anzahl der Tags"
Mein Fazit: Die beste Methode ist hier wenn man mit dem Browser Attribute loading="lazy" benutzt. Also hier die 2 Methode. Jedoch hat die Methode auch einen Nachteil, es werden immer alle Bilder geladen auch wenn der Besucher sie gar nicht anschaut... Dies ist bei der Methode von Test 3 nicht der Fall.
Da gilt es wohl abzuwägen zwischen 2 und 3.
Viele Grüße
Last edited: 2023-04-19 20:59:41 +0200 (CEST)
Schau dir mal das hier an:
https://tests.itjh.de/lazy-loading-images/
Test 1 ist ohne irgendwelche Lazy loadings und braucht ca. 500ms bis die Seite geladen ist.
Test 2 ist lazy loading vom Browser mit dem Attribute loading="lazy" i img Element. braucht nur ca. 100ms. Und ich sehe da kein Flackern, es fällt mir zumindest nix auf. Die Höhe der Bilder ist auch nicht fest, nur die Breite über dem div content.
Test 3 habe ich mir von https://web.dev/lazy-loading-images/ abgeschaut und braucht 220ms. mit placeholder-image.
Test 4 ist deine Lösung, und hier wird nichts nachgeladen, sondern die Ladezeit der Bilder zählt zu der gesamten Ladezeit der Webseite. Sie braucht somit bei mir im Browser ca. 1,3 Sekunden.
Zusätzlich habe ich auch das Event DOMContentLoaded eingebunden und erst dann seqLoad ausgeführt:
Code: (dl
)
1
2
3
4
5
6
7
document.addEventListener("DOMContentLoaded", function() {
var URLS = [ '1.jpg','2.jpg','...' ];
var xload = new seqLoad(URLS);
xload.load();
});
</script>Sonst hat er bei dem Vergleich noch keine img Elemente gefunden und ich bekam: "Die Anzahl der Bilder passt nicht zur Anzahl der Tags"
Mein Fazit: Die beste Methode ist hier wenn man mit dem Browser Attribute loading="lazy" benutzt. Also hier die 2 Methode. Jedoch hat die Methode auch einen Nachteil, es werden immer alle Bilder geladen auch wenn der Besucher sie gar nicht anschaut... Dies ist bei der Methode von Test 3 nicht der Fall.
Da gilt es wohl abzuwägen zwischen 2 und 3.
Viele Grüße
Last edited: 2023-04-19 20:59:41 +0200 (CEST)