Inte bara lat inladdning av bilder webbsidor hjälper till med ålderns prestandamen hjälper också till Sökmotoroptimering som observerats. Du kan använda jQuery och även Mootools för lat inläsning av bilder. Bilderna visas bara när du rullar till dem.
Detta jQuery-tips minskar många externa förfrågningar när sidan laddas, vilket i slutändan hjälper din WordPress-blogg att laddas snabbare. När du använder det här tricket bör du också använda cacheteknik för att förenkla sidladdningen.
Innehåll
Vad är Lazy Loading?
Lazy loading är när du laddar ner innehåll som du behöver det, istället för att ladda ner allt på en gång.
Lazy loading är en optimeringsteknik som används på internet. Den laddar bara den del av webbsidan som du behöver först, och den laddar inte några andra delar förrän du klickar på dem. På så sätt behöver den inte ladda all information från början till slut.
En form av lat laddning kallas infinity scroll. Det betyder att när du rullar ner på sidan kommer mer innehåll att laddas automatiskt.
Varför spelar lat lastning någon roll?
Den enorma nyttolasten på en webbsida är full av bilder, skript, stilmallar, typsnitt och videor. Bilder tar upp över 60% av storleken på en vanlig webbsida. Det går inte att bli av med dem eftersom de är viktiga för utformningen av en webbsida.
Utan någon optimering laddar din webbläsare ner allt innan den renderar sidan. Detta gör att sidan laddas långsammare.
Det är vettigt att göra vad du kan för att dina webbsidor ska laddas snabbare. Och när det kommer till bilder är de den största bidragsgivaren till storleken på en webbplats.
Så om du börjar med dem är det en bra idé för då kommer din webbplats att laddas snabbt. Det är här lat laddning kommer till nytta eftersom den bara laddar ner de delar av en bild som visas på din sida vid varje given tidpunkt.
Hur ställer jag in Lazy Loading med jQuery?
Det finns plugins som låter dig utföra enkla saker, men ju färre plugins du använder desto effektivare blir din blogg.
Det spelar ingen roll vilket WordPress-tema du använder, du kan implementera lazy loading väldigt enkelt.
Det är bara en handledning i två steg, en för att lägga till jQuery och den andra är att tilldela img-taggen en klass, om du vill lata ladda specifika bilder på din WordPress-blogg.
Här är jQuery-funktionen, som du måste lägga till i skripten för ditt tema.
/* lazyload.js (c) Lorenzo Giuliani * MIT License (http://www.opensource.org/licenses/mit-license.html) */ !function(window){ var $q = function(q, res) { if (document.querySelectorAll) { res = document.querySelectorAll(q); } annat { 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], function () { images.splice(i, i); }); } }; } ; // Array.prototype.slice.call kan inte anropas under vår underbara IE8 för (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(detta);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
Och här är hur du kan anropa jQuery-funktionen för att implementera Lazy loading av bilder dynamiskt. Du måste använda lazy-klassen för varje bild du vill ladda med jQuery-funktionen.
Slutsats
Lazyload är en bra sak att ha för din blogg eller företagswebbplats. Det hjälper med SEO och Google kan se det. Men du behöver inte oroa dig för detta eftersom de vet hur lazyloading fungerar.
Du kan också anpassa den hur du vill genom att ändra animeringen och lägga till en fördröjning.
Hej,
Det är bra information och det är till stor hjälp. Lazy Det är mycket användbart eftersom jag använde teman för att visa bilder.
Bra jobbat och fortsätt...!