Nicht nur faules Laden von Bildern in Webseiten hilft bei der Leistungsfähigkeit des Alters, hilft aber auch bei SEO wie beobachtet. Sie können verwenden jQuery und sogar Mootools für Lazy Loading Bilder. Die Bilder werden nur angezeigt, wenn Sie zu ihnen scrollen.
Dieser jQuery-Tipp reduziert viele externe Anfragen beim Laden der Seite, was letztendlich dazu beiträgt, dass Ihr WordPress-Blog schneller lädt. Während Sie diesen Trick anwenden, sollten Sie auch die Cache-Technik verwenden, um das Laden der Seite zu vereinfachen.
Inhalte
Was ist Lazy Loading?
Lazy Loading ist, wenn Sie Inhalte nach Bedarf herunterladen, anstatt sie alle auf einmal herunterzuladen.
Lazy Loading ist eine Optimierungstechnik, die im Internet verwendet wird. Es lädt nur den Abschnitt der Webseite, den Sie zuerst benötigen, und es lädt keine anderen Teile, bis Sie darauf klicken. Auf diese Weise müssen nicht alle Informationen von Anfang bis Ende geladen werden.
Eine Form des Lazy Loading wird als Infinity Scroll bezeichnet. Das bedeutet, dass beim Scrollen auf der Seite automatisch mehr Inhalt geladen wird.
Warum ist Lazy Loading wichtig?
Die riesige Nutzlast einer Webseite ist voller Bilder, Skripte, Stylesheets, Schriftarten und Videos. Bilder nehmen über 60% gestiegen der Größe einer typischen Webseite. Es ist nicht möglich, sie loszuwerden, da sie für die Gestaltung einer Webseite wichtig sind.
Ohne Optimierung lädt Ihr Webbrowser alles herunter, bevor er die Seite rendert. Dadurch wird das Laden der Seite langsamer.
Es ist sinnvoll, alles zu tun, damit Ihre Webseiten schneller geladen werden. Und wenn es um Bilder geht, tragen sie am meisten zur Größe einer Website bei.
Wenn Sie also damit beginnen, ist das eine gute Idee, denn dann wird Ihre Website schnell geladen. Hier ist Lazy Loading praktisch, da nur die Teile eines Bildes heruntergeladen werden, die zu einem bestimmten Zeitpunkt auf Ihrer Seite angezeigt werden.
Wie richte ich Lazy Loading mit jQuery ein?
Es gibt Plugins, mit denen Sie einfache Dinge ausführen können, aber je weniger Plugins Sie verwenden, desto effizienter wird Ihr Blog.
Es spielt keine Rolle, welches WordPress-Theme Sie verwenden, Sie können Lazy Loading sehr einfach implementieren.
Es ist nur ein zweistufiges Tutorial, eines zum Hinzufügen der jQuery und das andere, um dem img-Tag eine Klasse zuzuweisen, wenn Sie bestimmte Bilder in Ihrem WordPress-Blog träge laden möchten.
Hier ist die jQuery-Funktion, die Sie zu den Skripten Ihres Themes hinzufügen müssen.
/* lazyload.js (c) Lorenzo Giuliani * MIT-Lizenz (http://www.opensource.org/licenses/mit-license.html) */ !function(window){ var $q = function(q, res) { if (document.querySelectorAll) { res = document.querySelectorAll(q); } else { var d=document , a=d.styleSheets[0] || d.createStyleSheet(); a.addRule(q,'f:b'); for(var l=d.all,b=0,c=[],f=l.length;b= 0 && rect.left >= 0 && rect.top ) } var images = new Array() , query = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(images[i])) { loadImage(images[i], Funktion () { Bilder. Splice (i, i); }); } }; } ; // Array.prototype.slice.call ist unter unserem schönen IE8 nicht aufrufbar für (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(Dies);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
Und so können Sie die jQuery-Funktion aufrufen, um das Lazy Loading von Bildern dynamisch zu implementieren. Sie müssen die lazy-Klasse für jedes Bild verwenden, das Sie mit der jQuery-Funktion laden möchten.
Zusammenfassung
Lazyload ist eine gute Sache für Ihren Blog oder Ihre Unternehmenswebsite. Es hilft bei SEO und Google kann es sehen. Aber Sie müssen sich darüber keine Sorgen machen, da sie wissen, wie Lazyloading funktioniert.
Sie können es auch nach Belieben anpassen, indem Sie die Animation ändern und eine Verzögerung hinzufügen.
Hallo,
Es sind gute Informationen und sehr hilfreich. Faul Es ist sehr hilfreich, da ich Themen verwendet habe, um Bilder anzuzeigen.
Gute Arbeit und weiter so…!