Laden Sie Bilder automatisch nach (lazy load), damit Ihre Internetseite schneller lädt. Am konkreten Beispiel von Bootstrap Modals.

Von Lazy Load (~ träge laden) spricht man, wenn auf Internetseiten Elemente nachgeladen werden. Das Nachladen hat den Vorteil, dass die Seite schneller lädt, weil ein Teil (z.B. Bilder) erst geladen wird, wenn er benötigt wird. Auf z.B. Shopping-Seiten nervt das oft, weil man nicht schnell durchscrollen kann. Es wird ständig nachgeladen - es kann aber auch Vorteile bieten.

Wie kann man Lazy Load grundsätzlich umsetzen?

Umsetzen lässt sich das Ganze mit JavaScript (JS) und optional jQuery (jQuery macht das Arbeiten mit JS angehnehmer, wird aber in der Regel nicht zwingend benötigt).

Bilder werden per img-Tag in Internetseiten eingebunden. Normalerweise ist die URL eines Bildes im scr-Attribut hinterlegt. Der Browser lädt dann das Bild sobald er den HTML-Code interpretiert.

 
<img src="beispiel.jpg" alt="Beispiel"> // wird geladen
 

Wenn lazy geladen werden soll, kann man die URL des Bildes im HTML-Code beispielsweise in ein data-src-Attribut schreiben, welches vom Browser erst einmal ignoriert wird (data-irgendwas-Attribute haben keine allgemeine Bedeutung und können frei gewählt werden. Beispielsweise Bootstrap nutzt sie auch für die Modals.). Sobald das Bild geladern werden soll, kann per JS der Inhalt des data-src-Attributes in das src-Attribut kopiert werden. Der Browser ruft dann das Bild ab und zeigt es an.

 
<img src="" data-src="beispiel.jpg" alt="Beispiel"> // wird nicht geladen
 

Bootstrap Modals

Ein Modal in Bootstrap (Framework von Twitter) ist vergleichbar mit einem Popup, welches sich über die Seite legt und Inhalte anzeigen kann. Auf einer Seite nutze ich so etwas zum Beispiel zum Anzeigen von zusätzlichen Informationen, die sonst die Übersichtlichkeit verschlechtern würden.

Bootstrap 3 Modal geöffnet
Bootstrap 3 Modal geöffnet

Wenn auf einer Seite viele Modals sind, werden viele Bilder geladen, auch wenn sie noch nicht angesehen werden. Das verlängert die Ladezeit unnötig. Worum es hier gehen soll ist das nachladen von Bildern, wenn ein Modal geöffnet wird. Das Prinzip ist auf vieles anwendbar. Es benötigt ein Event (hier das öffnen des Modals, sonst oft das Scrollen auf einer Seite), Bilder und Code.

Umsetzung

Modal in HTML

  1.  
  2. <div id="modal1" class="modal fade" role="dialog">
  3. <div class="modal-dialog">
  4.  
  5. <div class="modal-content">
  6. <div class="modal-header">
  7. <button type="button" class="close" data-dismiss="modal">&times;button>
  8. <h4 class="modal-title">Modal Headerh4>
  9. div>
  10. <div class="modal-body">
  11. <p>Inhalte des Modals - Text, Bilder, Videos..p>
  12. div>
  13. <div class="modal-footer">
  14. <button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
  15. div>
  16. div>
  17.  
  18. div>
  19. div>
  20.  

JS-Code (jQuery)

  1.  
  2. // Modal lazy load images
  3. $(document).on('show.bs.modal','.modal', function(){ // wenn ein Modal geöffnet wird
  4. modalid = $(this).attr('id'); // (ID des geöffneten Modal zwischenspeichern)
  5. $('#' + modalid +' img').each(function() { // soll jedes Bild in diesem Modal
  6. var src = $(this).data('src'); // (data-src zwischenspeichern)
  7. $(this).attr('src',src); // sein data-src-Attribut als src-Attribut bekommen
  8. });
  9. });
  10. // und das Bild wird geladen :)
  11.  

Viel Spaß damit ;)

Wir benutzen Cookies

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell für den Betrieb der Seite, während andere uns helfen, diese Website und die Nutzererfahrung zu verbessern (Tracking Cookies). Sie können selbst entscheiden, ob Sie die Cookies zulassen möchten. Bitte beachten Sie, dass bei einer Ablehnung womöglich nicht mehr alle Funktionalitäten der Seite zur Verfügung stehen.