Bilder nachladen mit JQuery Lazy Load

Werbung

Stellen Sie sich eine Webseite vor, auf der 10 Artikel untereinander zu sehen sind. Jeder Artikel beinhaltet ein Bild. Jetzt kommt ein Besucher auf diese Webseite und klickt auf den Link im ersten Artikel und kommt damit auf eine andere Seite.

Wie viele Bilder hat dieser Besucher jetzt gesehen? Genau eins. Und wie viele Bilder wurden vom Webserver geladen? Ganze 10 Bilder wurden geladen. Das bedeutet, dass 9 Bilder geladen wurden ohne das der Besucher sie zu Gesicht bekommen hat.

Dies kostet nicht nur unnützen Traffik, sondern auch Ladezeit. Mittlerweile spielt auch die Ladezeit einer Webseite eine Rolle beim Ranking in Google. Daher sollte man diese Ladezeit so gering wie möglich halten.

 Ich sehe was, was du nicht siehst

Da der Besucher die übrigen neun Bilder nicht sieht, brauchen wir diese auch nicht zu laden und anzuzeigen. Jetzt kommt das JQuery PlugIn Lazy Load ins Spiel. Dies ermöglicht genau die Funktionsweise, die ich beabsichtige. Mit diesem Plugin werden nur Bilder geladen, die im Sichtbereich des Besuchers sind. Beim scrollen werden dann die benötigten Bilder nachgeladen.

Geringer Aufwand, große Wirkung

Der Aufwand das PlugIn zu installieren und den bestehenden Code anzupassen hält sich sehr in Grenzen. Wenn man bereits JQuery einsetzt und eingebunden hat, so braucht man nur noch das PlugIn einzubinden, den Code für die Bilder anpassen, welche mit Lazy Load nachgeladen werden sollen.

So sieht es im Firebug ohne Lazy Load aus. Wie Sie sehen können werden alle Bilder geladen. Die Ladezeit beträgt ca. 2,8 – 3,0 Sekunden.

Schauen Sie dazu auch auf die Demo Seite.

Werbung

Erfolg überprüfen

In meinem Beispiel habe ich 38 Bilder, alle rund 100 KB groß, auf einer Seite untereinander dargestellt. Das Ergebnis habe ich dann mit Firebug im Firefox überprüft. Der Unterschied ist enorm. Die Ladezeit hat sich um über zwei Sekunden verkürzt. Dies gilt natürlich nur für den ersten Aufruf, weil danach die Bilder im Browser Cache gespeichert sind und daraus aufgerufen werden.

Hier die Demo Seite mit dem Einsatz von Lazy Load.

Trotzdem lohnt sich ein Einsatz, weil gerade beim ersten Besuch der Besucher kritischer auf lange Ladezeiten reagiert. Besonders lohnt sich das Plugin, wenn sich viele Bilder auf einer Webseite befinden.

Werbung
Hat dir der Beitrag gefallen? Dann würde ich mich sehr freuen, wenn du ihn weiterempfehlen würdest.Share on FacebookShare on Google+Tweet about this on Twitter

8 Gedanken zu „Bilder nachladen mit JQuery Lazy Load

  1. Hallo,

    das funktioniert auch im Chrome Browser. Ich habe es gerade zur Sicherheit nochmal getestet. Die Bilder erscheinen natürlich sehr schnell. Daher könnte der Eindruck entstehen, dass diese bereits geladen sind. Man kann auch einfach die Seite neu laden, dann mit der Scrollbar ganz schnell nach unten scrollen. Dann erscheinen teilweise graue Kästchen an der Stelle wo eigentlich das Bild erscheinen soll. Das Bild wird dann nachgeladen.

    Man sieht es übrigens auch am Quelltext.

    Bereits geladene und angezeigte Bilder haben das Original Bild im src Attribut. Und noch zu ladene Lazy Loaded Bilder haben dort noch /images/grey.gif stehen.

    Gruß,
    Dirk

  2. Hallo,

    gibt es denn eine Möglichkeit das auch für Webseiten nach XHTML1.1 zu nutzen, ohne das der W3C-Validator meckert? Dieser hat ja ein problem mit data-original im HTML-Quelltext.

    VIelen Dank

    MfG Steven

  3. Eine andere Möglichkeit ist mir nicht bekannt. Das Javascript muss ja irgendwie die Orinal Image Url erreichen können. Das wird über das data-original Attribut erreicht. Der Validator würde auch über jedes andere Pseudo Attribut meckern.

    Die Frage ist warum man unbedingt komplett W3C valide sein möchte. Klar ist, es sollte eine hohe Validität vorhanden sein, aber ich würde in dem Fall sogar eine Ausnahme machen, wenn es sich um viele Bilder handelt und der Nutzen größer ist als die Nachteile.

  4. Hallo,

    wie sieht das ganze SEO-technisch aus? Wenn im src des img-Tag nur noch ein loading.gif steht, wirkt sich das bestimmt negativ auf die Google-Bildersuche aus.
    Hat da jemand Erfahrungen?

    Grüße

  5. Das ist noch eins der Probleme, die erwähnt werden sollten. Der Google Index Bot ignoriert die noscript Tags und daher ist es auch nicht möglich hier einen Fallback einzubauen.

    Eine Lösung ist mir jetzt auch nicht bekannt.

Schreibe einen Kommentar

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