Niet alleen lui laden van afbeeldingen in webpagina's helpen bij de prestaties van leeftijd, maar helpt ook bij Search Engine Optimization zoals waargenomen. Je kunt gebruiken jQuery en zelfs Mootools voor lui laden van afbeeldingen. De afbeeldingen worden alleen weergegeven als u ernaartoe scrolt.
Deze jQuery-tip vermindert veel externe verzoeken tijdens het laden van de pagina, waardoor uw WordPress-blog uiteindelijk sneller laadt. Terwijl je deze truc gebruikt, moet je ook de cachetechniek gebruiken om het laden van de pagina te vereenvoudigen.
Inhoud
Wat is Lazy Loading?
Lazy loading is wanneer u inhoud downloadt wanneer u deze nodig heeft, in plaats van alles in één keer te downloaden.
Lazy loading is een optimalisatietechniek die op internet wordt gebruikt. Het laadt alleen het gedeelte van de webpagina dat u eerst nodig hebt, en het laadt geen andere delen totdat u erop klikt. Op deze manier hoeft hij niet alle informatie van begin tot eind te laden.
Een vorm van lui laden wordt oneindig scrollen genoemd. Dit betekent dat als u naar beneden scrolt op de pagina, automatisch meer inhoud wordt geladen.
Waarom is lui laden belangrijk?
De enorme lading van een webpagina zit vol met afbeeldingen, scripts, stylesheets, lettertypen en video's. Afbeeldingen nemen meer dan 60% van de grootte van een typische webpagina. Het is niet mogelijk om ze kwijt te raken omdat ze belangrijk zijn voor het ontwerp van een webpagina.
Zonder enige optimalisatie downloadt uw webbrowser alles voordat deze de pagina weergeeft. Hierdoor laadt de pagina langzamer.
Het is logisch om te doen wat u kunt om uw webpagina's sneller te laten laden. En als het op afbeeldingen aankomt, leveren ze de grootste bijdrage aan de grootte van een website.
Dus als je daarmee begint is dat een goed idee want dan laadt je website snel. Dit is waar lui laden van pas komt, omdat het alleen de delen van een afbeelding downloadt die op een bepaald moment op uw pagina te zien zijn.
Hoe Lazy Loading in te stellen met jQuery?
Er zijn plug-ins waarmee je eenvoudige dingen kunt doen, maar hoe minder plug-ins je gebruikt, hoe efficiënter je blog.
Het maakt niet uit welk WordPress-thema u gebruikt, u kunt lui laden heel gemakkelijk implementeren.
Het is slechts een tutorial in twee stappen, een voor het toevoegen van jQuery en de andere is om de img-tag een klasse toe te wijzen, als je specifieke afbeeldingen op je WordPress-blog wilt lui laden.
Hier is de jQuery-functie, die u aan de scripts van uw thema moet toevoegen.
/* lazyload.js (c) Lorenzo Giuliani * MIT-licentie (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], functie () { afbeeldingen.splice (i, i);}); } }; }; // Array.prototype.slice.call kan niet worden aangeroepen onder onze mooie IE8 voor (var i = 0; i <query.length; i++) { images.push(query[i]); }; procesScroll(); addEventListener('scroll',processScroll); }(dit);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
En hier leest u hoe u de jQuery-functie kunt aanroepen om Lazy loading van afbeeldingen dynamisch te implementeren. U moet de luie klasse gebruiken voor elke afbeelding die u wilt laden met behulp van de jQuery-functie.
Conclusie
Lazyload is een goede zaak voor je blog of bedrijfswebsite. Het helpt bij SEO en Google kan het zien. Maar u hoeft zich hier geen zorgen over te maken, want zij weten hoe lazyloading werkt.
Je kunt het ook naar wens aanpassen door de animatie te wijzigen en een vertraging toe te voegen.
Hoi,
Het is goede informatie en het is zeer nuttig. Lui Het is erg handig omdat ik thema's gebruikte om afbeeldingen weer te geven.
Goed werk en ga zo door...!