Frage von Tim204, 12

Javascript Lazy Size (lazy load) funktioniert nur auf Bilder ab bestimmter Größe?

Hallo,

ich suche schon den halben Tag nach einer Lösung, ohne Erfolg. Ich habe das Script "Lazy Size" eingebaut welches auch generell gut funktioniert. Nun habe ich aber festgestellt, dass dieses nur Bilder ab bestimmter Größe "lazy läd", kleinere Bilder ignoriert er und der browser läd diese bereits im Vorfeld.. Da ich Unmengen an kleiner Bilder habe ~ 100x100 müsste ich das script entsprechend umschreiben.. nun ich finde aber nicht den Wert der dieses limit bestimmt oder Infos dazu in der Scriptbeschreibung. Kennt sich jemand zufällig aus?

Grüße Tim

Antwort
von Silerra, 10

Das "Lazy Loading" macht ja auch nur ab einer bestimmten Bildgröße Sinn. Ein Bild von 100 x 100 Pixel hat nur noch eine Dateigröße von ca. 900 Bytes. Aber die Headerdaten sind schon allein ca. im Schnitt 40 Bytes groß, wenn der Browser sie von dem Server holt. Wenn du also diese Pixelgrößen noch kleiner setzt, dann kann es zu ernormen Performance-Nachteil führen. (statt einen Vorteil zu haben.)

Die Anzahl der Anfragen an den Server erhöht sich zudem beim "Lazy Loading" und jede Anfrage kostet Zeit. (je Anfrage zwar nur 18 bis 60 Millisekunden, aber lappert sich schnell zusammen)

Deshalb stelle ich mir bei dieser Frage eine Gegenfrage: Was möchtest du beim "Lazy Loading" erreichen? Wenn ich Lazy Loading einsetze, dann möchte ich damit erreichen, dass der Besucher meiner Seite ziemlich schnell durch große Bilder navigieren und schonmal Eindrücke gewinnen kann, bevor er ein Bild mit höhere Qualität genauer betrachtet. (so mal kurz zusammengefasst)

Wenn du willst, dass die zahlreichen kleinen Bilder schneller geladen werden kann, dann erreicht diese nur über sogenannten Sprites. Hierbei werden die vielen kleinen Bilder zu einem großem Bild zusammengefasst und somit wird hier die Anzahl an Anfragen deutlich verringert. Gleichzeitig wird das Datenvolumen durch die Zusammenfassung automatisch geringer, da wegen weniger Anfragen auch weniger Headerdaten zustande kommen.

Kommentar von Tim204 ,

Danke für deine ausführliche Antwort. Ich habe bemerkt, dass es nicht an der Größe der Bilder lag sonder, dass anscheint das CMS den Platzhalter für das Previewbild einfach bereits von einem anderen script "besetzt" hat.

Es handelt sich um einen Webshop mit ca. 100-200 Bilder pro Seite die erst beim scrollen geladen werden sollen. Ich habe mich nun für eine Auflösung von 360x360px entschieden welche ich auf 160px verkleinere und mit einem anderen javascript einen "inner zoom" beim hover erzeugen möchte. Wo ich aber wieder auf ein neues Problem gestoßen bin.. Sobald ich das zoom script einbauen, funktioniert lazy size script nicht mehr.

Kommentar von Silerra ,

Leider ist ab hier die Komplexität der Anforderungen sehr hoch. Damit ist der Aufwand über meinen festgelegten Rahmen und kann bzw. will es nicht mehr weiter/tiefer in die Problematik eingehen.

Nun, hier schlage ich vor. Schau dir in Inpspektor von Browser die Html-Elemente genauer an. Oft legen die Skripte neue HTML-Elemente  an und fügen dort das kopierte bzw. modifiertes Bild hinzu. Gleichzeitig wird das 'alte' vorhandene Element auf 'hidden' bzw. 'display:none' gesetzt. Ein weiteres Problem ist, während Zoomscript z.B. direkt mit Initialisierung der Bildelemente beginnt und auf die Ressourcen zugreift, versucht lazy-script dagegen die Ressourcen zurück zuhalten.

Jetzt habe ich doch mehr geschrieben. Bin aber diesmal nicht in Detail gegangen.

Keine passende Antwort gefunden?

Fragen Sie die Community