JavaScript: Lazy Load mal Anders (gelöst) (HTML, CSS und Javascript)

[thread]21454[/thread]

JavaScript: Lazy Load mal Anders [gelöst]

Tags: HTML Javascript Ähnliche Threads

Leser: 8

Articles: hide open all | hide show old branches

+6 replies
rosti

2023-04-18 10:56

User since
2011-03-19
3566 Artikel
BenutzerIn

Moin!

Die Idee dahinter ist die, daß die Bilder einer Seite nicht alle auf einmal geladen werden, weil es den Ladevorgang der ganzen Seite ausbremst. Überlicherweise wird hierzu das scroll-Event herangezogen und bei jedem Scrollvorgang geprüft, ob sich ein im HTML-Text notiertes img-Element im Viewport befindet. Erst wenn das der Fall ist, wird das Bild geladen, also dessen URL dem src-Attribut zugewiesen. Diesem Verfahren haften jedoch einige Nachteile an. Durch das Laden eines Bildes verschiebt sich nämlich das img-Element des Nächsten weiter nach unten, so daß dieses Element wieder aus dem Viewport herausfällt sofern es darin vorher sichtbar war. Das führt dazu daß die ganz Seite zappelt, kurzum das Scrollen ist nicht schön.

Und hier nun ein anderes Verfahren, frisch ausgeheckt ;)
http://rolfrost.de/dload.html
http://blog.rolfrost.de/

The art of steam.
- +2 replies
- bianca
  
  2023-04-19 07:30
  
  User since
  2009-09-13
  7016 Artikel
  BenutzerIn
  
  2023-04-18T08:56:43 rosti
  Durch das Laden eines Bildes verschiebt sich nämlich das img-Element des Nächsten weiter nach unten
  
  Gibst du den Images keine width und height? Oder ziehen die nicht wenn kein src angegeben ist?
  10 print "Hallo"
  20 goto 10
  - rosti
    
    2023-04-19 10:32
    
    User since
    2011-03-19
    3566 Artikel
    BenutzerIn
    
    width und height anzugeben ist problematisch wegen der Scalierbarkeit (Responsive Webdesign). Das hat aber mit den Problemen die ein Legacy Lazy Load mit sich bringt nichts zu tun. Denn diese Probleme gibt es weil das Laden der Bilder vom Scrollverhalten des Benutzers abhängig ist.
    
    Contigous Load (mein neues Verfahren) hingegegen vermeidet diese Nachteile. Ich habe in meiner Fotoverwaltung auf manchen Seiten sehr viele Bilder zu laden, das können ggf. über 600 Bilder sein, da macht sich der Unterschied deutlich bemerkbar. Es scrollt sich deutlich angenehmer jetzt.
    
    Natürlich hast Du Recht, man könnte auch height+width schon vor dem Laden angeben. In meiner Anwendung muß man die Bilder aber auch mal drehen können.
    
    MFG
    http://blog.rolfrost.de/
    
    The art of steam.
- +3 replies
- Gustl
  
  2023-04-19 20:54
  User since
  2011-01-27
  443 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:
  
  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)
  - rosti
    
    2023-04-19 22:15
    
    User since
    2011-03-19
    3566 Artikel
    BenutzerIn
    
    danke Gustl.
    Quote
    loading lazy weist den Browser an, Bilder erst zu laden, wenn sie in den ViewPort kommen
    ist genau das was ich in meiner Anwendung nicht haben will. Contigous Load entkoppelt das Laden der Bilder vom Scrollvorgang, mehr wollte ich nicht.
    
    lazy als Attribut kannte ich noch nicht, kann mir aber gut vorstellen daß es den Browser weniger stresst womit die Probleme die JS-Lösungen mit sich bringen entfallen. Ich werde das mal testen ;)
    
    MFG
    
    Edit: Testergebnis: Funktioniert. Leider nicht über loading: lazy im css-File.
    Last edited: 2023-04-20 07:39:04 +0200 (CEST)
    http://blog.rolfrost.de/
    
    The art of steam.
  - rosti
    
    2023-04-20 10:12
    
    User since
    2011-03-19
    3566 Artikel
    BenutzerIn
    
    Danke Gustl, loading="lazy" hat mich überzeugt, es funktioniert bestens auch auf Seiten mit > 500 Images. Ich habe jetzt über ein Jahr lang nichts programmiert, schön zu sehen daß sich die Welt der Browser trotzdem weiterdreht ;)
    
    MFG
    http://blog.rolfrost.de/
    
    The art of steam.

View all threads created 2023-04-18 10:56.