Mitte ainult piltide laisk laadimine veebilehed aitavad vanusega jõudlust parandada, vaid aitab ka selles Otsingumootori optimeerimine nagu täheldatud. Sa võid kasutada jQuery ja isegi Mootools piltide laisaks laadimiseks. Pildid kuvatakse alles siis, kui nendeni kerite.
See jQuery näpunäide vähendab lehe laadimise ajal palju väliseid päringuid, aidates lõpuks teie WordPressi ajaveebi kiiremini laadida. Selle nipi kasutamisel peaksite lehe laadimise lihtsustamiseks kasutama ka vahemälutehnikat.
Sisu
Mis on laisk laadimine?
Laisk laadimine on siis, kui laadite sisu alla nii, nagu seda vajate, selle asemel et kõike korraga alla laadida.
Laisk laadimine on Internetis kasutatav optimeerimistehnika. See laadib ainult selle veebilehe jaotise, mida alguses vajate, ja muid osi ei laadita enne, kui klõpsate sellel. Nii ei pea see kogu teavet algusest lõpuni laadima.
Ühte laisa laadimise vormi nimetatakse infinity scrolliks. See tähendab, et kui kerite lehel allapoole, laaditakse automaatselt rohkem sisu.
Miks on laisk laadimine oluline?
Veebilehe tohutu kasulik koormus on täis pilte, skripte, laaditabeleid, fonte ja videoid. Pildid võtavad üle 60% tüüpilise veebilehe suurusest. Nendest pole võimalik lahti saada, sest need on olulised veebilehe kujundamisel.
Ilma optimeerimiseta laadib teie veebibrauser kõik enne lehe renderdamist alla. See muudab lehe laadimise aeglasemaks.
Veebilehtede kiiremaks laadimiseks on mõistlik teha kõik endast olenev. Ja kui rääkida piltidest, siis need on veebisaidi suuruse suurimaks mõjutajaks.
Nii et kui alustate nendega, on see hea mõte, sest siis laaditakse teie veebisait kiiresti. Siin on laisk laadimine kasulik, kuna see laadib alla ainult need pildi osad, mis on teie lehel igal ajahetkel nähtaval.
Kuidas seadistada jQueryga laisklaadimist?
On pistikprogramme, mis võimaldavad teil teha lihtsaid asju, kuid mida vähem, mida vähem pistikprogramme kasutate, seda tõhusam on teie ajaveebi.
Pole tähtis, millist WordPressi teemat kasutate, saate laiska laadimise väga lihtsalt rakendada.
See on lihtsalt kaheetapiline õpetus, millest üks on jQuery lisamiseks ja teine on img-sildile klassi määramine, kui soovite oma WordPressi ajaveebi konkreetseid pilte laisk laadida.
Siin on funktsioon jQuery, mille peate oma teema skriptidele lisama.
/* lazyload.js (c) Lorenzo Giuliani * MIT-litsents (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], function () { images.splice(i, i); }); } }; } ; // Array.prototype.slice.call ei ole meie armsa IE8 all kutsutav for (var i = 0; i < query.length; i++) { images.push(query[i]); }; protsessScroll(); addEventListener('scroll',processScroll); }(see);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
Ja siin on, kuidas saate kutsuda jQuery funktsiooni, et rakendada piltide dünaamilist laadimist. Peate kasutama laiska klassi iga pildi jaoks, mida soovite funktsiooni jQuery abil laadida.
Järeldus
Lazyload on hea asi oma ajaveebi või ettevõtte veebisaidi jaoks. See aitab SEO-ga ja Google näeb seda. Kuid te ei pea selle pärast muretsema, sest nad teavad, kuidas laisklaadimine töötab.
Saate seda ka vastavalt soovile kohandada, muutes animatsiooni ja lisades viivituse.
Tere,
See on hea teave ja see on väga kasulik. Laisk See on väga kasulik, kuna kasutasin piltide näitamiseks teemasid.
Head tööd ja jätkake…!