Bilder zur Laufzeit nachladen

Bilder zur Laufzeit nachladen

Eine Zeit lang gab es den Trend Bilder progressiv zu laden, was ich persönlich als wirklich gute Lösung angesehen habe, aber irgendwie ist das ganze wieder verschwunden oder hat sich nie so recht durchgesetzt. Jetzt stand ich vor kurzem vor dem Problem, dass eine Seite mit vielen relativ hoch auflösenden Bildern leider dementsprechend lange Ladezeiten hatte. Wäre es nicht toll wenn die Bilder dann einfach während ich schon ein paar ansehe langsam im Hintergrund geladen werden.

Das muss sich schon jemand gedacht haben, und nach einer kurzen Suche bin ich auf das Lazy Load Plugin für jQuery gestoßen. Funktional genau das was ich suche. Leider kam sich das mit meinem Content Slider in den Weg. Also musste ich kurz selber ran.

Ausgegangen bin ich von diesem jQuery Plugin das erkennt wenn ein Element in den Viewport rückt. Dann nur noch schnell diesen Code hier einbauen:

$('.lazy').appear(function() {

  if($(this).attr('src') != undefined) {

    $(this).attr('src', $(this).attr('data-original'));

  }

});

und Bilder mit src auszeichnen der auf eine Mini-Version des Bildes zeigt, und data-original das auf das Originalbild zeigt. Und schon läuft alles wie gewünscht. Kommt ein Bild in den Viewport wird das hochauflösende geladen, sonst bleibt die Ladezeit moderat.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.