Nu numai încărcarea leneșă a imaginilor în paginile web ajută la performanța vârstei, dar ajută și în Search Engine Optimization după cum s-a observat. Poți să folosești jQuery și chiar Mootools pentru imagini de încărcare leneșă. Imaginile vor apărea numai când veți derula la ele.
Acest sfat jQuery reduce o mulțime de solicitări externe în timpul încărcării paginii, ajutând în cele din urmă blogul dvs. WordPress să se încarce mai rapid. În timp ce utilizați acest truc, ar trebui să utilizați și Tehnica Cache pentru a simplifica încărcarea paginii.
Cuprins
Ce este Lazy Loading?
Încărcarea leneră este atunci când descărcați conținutul așa cum aveți nevoie, în loc să îl descărcați pe tot odată.
Lazy loading este o tehnică de optimizare folosită pe internet. Încarcă doar secțiunea paginii web de care aveți nevoie la început și nu încarcă alte părți până când faceți clic pe ele. În acest fel, nu trebuie să încarce toate informațiile de la început până la sfârșit.
O formă de încărcare leneșă se numește derulare infinit. Aceasta înseamnă că, pe măsură ce derulați în jos pe pagină, mai mult conținut se va încărca automat.
De ce contează încărcarea leneșă?
Sarcina uriașă a unei pagini web este plină de imagini, scripturi, foi de stil, fonturi și videoclipuri. Imaginile iau cu peste 60% de dimensiunea unei pagini web tipice. Nu este posibil să scapi de ele deoarece sunt importante pentru proiectarea unei pagini web.
Fără nicio optimizare, browserul dvs. web descarcă totul înainte de a reda pagina. Acest lucru face ca pagina să se încarce mai încet.
Este logic să faci tot ce poți pentru ca paginile tale web să se încarce mai repede. Și când vine vorba de imagini, acestea sunt cel mai mare contributor la dimensiunea unui site web.
Deci, dacă începeți cu ele, aceasta este o idee bună pentru că atunci site-ul dvs. se va încărca rapid. Aici este utilă încărcarea leneșă, deoarece descarcă doar părțile unei imagini care sunt vizibile pe pagina ta la un moment dat.
Cum se configurează Lazy Loading cu jQuery?
Există plugin-uri care vă permit să efectuați lucruri simple, dar cu cât mai puține plugin-uri folosiți, cu atât mai eficient va fi blogul dvs.
Nu contează ce tema WordPress utilizați, puteți implementa încărcare leneșă foarte ușor.
Este doar un tutorial în doi pași, unul pentru adăugarea jQuery și celălalt este să atribuiți etichetei img o clasă, dacă doriți să încărcați leneș anumite imagini pe blogul dvs. WordPress.
Iată funcția jQuery, pe care va trebui să o adăugați la scripturile temei dvs.
/* lazyload.js (c) Lorenzo Giuliani * Licență MIT (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 imagini = new Array() , interogare = $q('img.lazy') , processScroll = function(){ for (var i = 0; i < images.length; i++) { if (elementInViewport(imagini[i])) { loadImage(imagini[i], function () { images.splice(i, i); }); } }; } ; // Array.prototype.slice.call nu este apelabil sub minunatul nostru IE8 pentru (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(acest);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
Și iată cum puteți apela funcția jQuery pentru a implementa Încărcarea Leneșă a imaginilor în mod dinamic. Trebuie să utilizați clasa lazy pentru fiecare imagine pe care doriți să o încărcați folosind funcția jQuery.
Concluzie
Lazyload este un lucru bun pentru blogul sau site-ul dvs. corporativ. Ajută la SEO și Google îl poate vedea. Dar, nu trebuie să vă faceți griji pentru acest lucru, deoarece ei știu cum funcționează lazyloading.
De asemenea, îl puteți personaliza după cum doriți, modificând animația și adăugând o întârziere.
Bună,
Este o informație bună și este de mare ajutor. Leneș Este foarte util, deoarece foloseam teme pentru a afișa imagini.
Bună treabă și continuă…!