Ne tikai slinka attēlu ielāde tīmekļa lapas palīdz uzlabot vecuma sniegumu, bet arī palīdz Search Engine Optimization kā novērots. Tu vari izmantot jQuery un pat Mootools slinkai attēlu ielādei. Attēli tiks parādīti tikai tad, kad ritināsit līdz tiem.
Šis jQuery padoms samazina daudzus ārējos pieprasījumus lapas ielādes laikā, tādējādi palīdzot ātrāk ielādēt jūsu WordPress emuāru. Izmantojot šo triku, jums vajadzētu izmantot arī kešatmiņas paņēmienu, lai vienkāršotu lapas ielādi.
Saturs
Kas ir slinka ielāde?
Slinka ielāde ir tad, kad lejupielādējat saturu, kas jums nepieciešams, nevis lejupielādējat visu uzreiz.
Slinka ielāde ir optimizācijas paņēmiens, ko izmanto internetā. Tas ielādē tikai to tīmekļa lapas sadaļu, kas jums vispirms ir nepieciešama, un neielādē citas daļas, kamēr jūs uz tām nenoklikšķināt. Tādā veidā tai nav jāielādē visa informācija no sākuma līdz beigām.
Viens no slinkas ielādes veidiem tiek saukts par bezgalības ritināšanu. Tas nozīmē, ka, ritinot lapu uz leju, automātiski tiks ielādēts vairāk satura.
Kāpēc slinkai iekraušanai ir nozīme?
Tīmekļa lapas milzīgā slodze ir pilna ar attēliem, skriptiem, stila lapām, fontiem un videoklipiem. Uzņem attēlus vairāk nekā 60% tipiskas tīmekļa lapas lieluma. No tiem nav iespējams atbrīvoties, jo tie ir svarīgi tīmekļa lapas dizainā.
Bez optimizācijas jūsu tīmekļa pārlūkprogramma lejupielādē visu, pirms tiek renderēta lapa. Tas palēninās lapas ielādi.
Ir lietderīgi darīt visu iespējamo, lai jūsu tīmekļa lapas tiktu ielādētas ātrāk. Un, kad runa ir par attēliem, tie visvairāk ietekmē vietnes lielumu.
Tātad, ja sākat ar tiem, tā ir laba ideja, jo tad jūsu vietne tiks ielādēta ātri. Šeit noder slinka ielāde, jo tiek lejupielādētas tikai tās attēla daļas, kuras jebkurā brīdī ir redzamas jūsu lapā.
Kā iestatīt slinko ielādi, izmantojot jQuery?
Ir spraudņi, kas ļauj veikt vienkāršas darbības, taču, jo mazāk, jo mazāk spraudņu izmantosiet, jo efektīvāks būs jūsu emuārs.
Neatkarīgi no tā, kādu WordPress motīvu izmantojat, jūs varat ļoti viegli ieviest slinku ielādi.
Tā ir tikai divpakāpju apmācība, no kurām viena ir paredzēta jQuery pievienošanai, bet otra ir img taga piešķiršana klasei, ja vēlaties slinki ielādēt konkrētus attēlus savā WordPress emuārā.
Šeit ir jQuery funkcija, kas jums būs jāpievieno jūsu motīva skriptiem.
/* lazyload.js (c) Lorenco Džuliani * MIT licence (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], funkcija () { images.splice(i, i); }); } }; } ; // Array.prototype.slice.call nevar izsaukt mūsu jaukajā IE8 priekš (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(šis);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
Lūk, kā jūs varat izsaukt jQuery funkciju, lai dinamiski ieviestu slinku attēlu ielādi. Katram attēlam, kuru vēlaties ielādēt, izmantojot funkciju jQuery, ir jāizmanto slinkuma klase.
Secinājumi
Lazyload ir laba lieta jūsu emuāram vai uzņēmuma vietnei. Tas palīdz ar SEO, un Google to var redzēt. Bet jums par to nav jāuztraucas, jo viņi zina, kā darbojas lazyloading.
Varat arī pielāgot to, kā vien vēlaties, mainot animāciju un pievienojot aizkavi.
Sveiki,
Tā ir laba informācija un ļoti noderīga. Slinks Tas ir ļoti noderīgi, jo attēlu rādīšanai izmantoju motīvus.
Labs darbs un tā turpināt...!