Warum
Eine klassische Newsseite besitzt eine Vielzahl von Bildern und hat - so es denn auch was zu berichten gibt - einen größeren Umfang. Aktuelle Browser laden beim Aufrufen eines HTML-Dokumentes alle Bilder runter die enthalten sind. Am PC stört das wenige und ist seltener ein Nachteil, bei mobilen Websites bedeutet es aber das eine Menge Daten geladen werden, von denen ich unter Umständen nichts habe, da ich nur die neusten 3 Einträge überfliege und dann weiter surfe. Die restlichen Bilder bekomme ich, aufgrund des kleinen Viewports, nicht mal im Augenwinkel mit. Neben den verbrennen von mobilen Datenvolumen blockiert das Laden von Bildern natürlich in dem Moment Bandbreite, die ich für andere Resourcen besser brauchen kann.
LazyLoad, bitte!
Schön wäre es, wenn der Browser erst dann ein Bild lädt, wenn es in den Viewport gerät. Da aktuell kein mobile Browser das von Haus aus anbietet, muss also mal wieder JavaScript her. Diese Idee hatten natürlich schon einige Frontend-Entwickler und so bietet es sich an es zunächst mit einer fertigen Lösung zu versuchen.
LazyLoad ist so ein fertiges Script mit 2 fetten Pluspunkten:
- jQuery unabhängig
- srcset-Support
Nach dem das Script in der Website eingebunden wurde, ist es recht einfach zu benutzen. Statt dem src- oder srcset Attribut bekommt der img-Tag data-Attribute zu den Bildpfaden. Ist der img-Tag im Viewport-Bereich, so wird aus diesen data-Attributen die Information in src/srcset reinkopiert - zack fertig.
<img alt="Katze" data-original="/katze.jpg" data-original-set="/katze-retina-1.jpg 1x, /katze-retina-2.jpg 2x" />
Finetuning kann dann z.B. durch Setzen eines Schwellenwertes erfolgen. Der sorgt dann dafür das ein Bild schon geladen wird wenn es z.B. 100px davon entfernt ist gleich in den Viewport zu geraten. Auch kann man LazyLoad noch einen Call-Back übergeben um JavaScript nach Beenden des Ladevorgangs auszuführen.
Viel Spaß beim Ausprobieren!