Hindi lamang tamad na pag-load ng mga larawan sa nakakatulong ang mga webpage sa pagganap ng edad, ngunit nakakatulong din sa Search Engine Optimization gaya ng naobserbahan. Pwede mong gamitin jQuery at maging ang Mootools para sa tamad na naglo-load ng mga larawan. Lalabas lang ang mga larawan kapag nag-scroll ka sa kanila.
Binabawasan ng tip ng jQuery na ito ang maraming panlabas na kahilingan habang nilo-load ang page, na sa huli ay tumutulong sa iyong WordPress blog na mag-load nang mas mabilis. Habang ginagamit ang trick na ito, dapat mo ring gamitin ang Cache Technique para sa pagpapasimple ng paglo-load ng page.
Nilalaman
Ano ang Lazy Loading?
Ang lazy loading ay kapag nag-download ka ng content ayon sa kailangan mo, sa halip na i-download ito nang sabay-sabay.
Ang lazy loading ay isang optimization technique na ginagamit sa internet. Nilo-load lang nito ang seksyon ng web page na kailangan mo sa una, at hindi ito naglo-load ng iba pang bahagi hanggang sa mag-click ka sa mga ito. Sa ganitong paraan, hindi nito kailangang i-load ang lahat ng impormasyon mula simula hanggang matapos.
Ang isang paraan ng lazy loading ay tinatawag na infinity scroll. Nangangahulugan ito na habang nag-i-scroll ka pababa sa pahina, mas maraming nilalaman ang awtomatikong maglo-load.
Bakit mahalaga ang lazy loading?
Ang malaking payload ng isang web page ay puno ng mga larawan, script, stylesheet, font, at video. Kumuha ng mga larawan higit sa 60% sa laki ng karaniwang web page. Hindi posible na maalis ang mga ito dahil mahalaga ang mga ito para sa disenyo ng isang webpage.
Nang walang anumang pag-optimize, dina-download ng iyong web browser ang lahat bago nito i-render ang pahina. Ginagawa nitong mas mabagal ang pag-load ng page.
Makatuwirang gawin ang iyong makakaya upang mapabilis ang pag-load ng iyong mga web page. At pagdating sa mga imahe, sila ang pinakamalaking kontribyutor sa laki ng isang website.
Kaya kung magsisimula ka sa kanila, iyon ay isang magandang ideya dahil ang iyong website ay maglo-load nang mabilis. Dito nagagamit ang tamad na pag-load dahil dina-download lang nito ang mga bahagi ng isang larawan na nakikita sa iyong pahina sa anumang oras.
Paano i-setup ang Lazy Loading gamit ang jQuery?
May mga plugin na nagbibigay-daan sa iyong magsagawa ng mga simpleng bagay, ngunit mas kaunti ang mga plugin na iyong ginagamit, mas mahusay ang iyong blog.
Hindi mahalaga kung anong tema ng WordPress ang iyong ginagamit, maaari mong ipatupad ang tamad na pag-load nang napakadali.
Ito ay isang dalawang-hakbang na tutorial lamang, ang isa para sa pagdaragdag ng jQuery at ang isa ay upang italaga ang img tag ng isang klase, kung gusto mong tamad na mag-load ng mga partikular na larawan sa iyong WordPress blog.
Narito ang jQuery function, na kakailanganin mong idagdag sa mga script ng iyong 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); } 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 ay hindi matatawag sa ilalim ng aming magandang IE8 para sa (var i = 0; i < query.length; i++) { images.push(query[i]); }; processScroll(); addEventListener('scroll',processScroll); }(ito);
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152"></a>
At narito kung paano mo matatawag ang jQuery function upang maipatupad ang Lazy loading ng mga imahe nang pabago-bago. Kailangan mong gamitin ang tamad na klase para sa bawat imahe na gusto mong i-load gamit ang jQuery function.
Konklusyon
Ang Lazyload ay isang magandang bagay para sa iyong blog o corporate website. Nakakatulong ito sa SEO at makikita ito ng Google. Ngunit, hindi mo kailangang mag-alala tungkol dito dahil alam nila kung paano gumagana ang lazyloading.
Maaari mo ring i-customize ito gayunpaman gusto mo sa pamamagitan ng pagpapalit ng animation at pagdaragdag ng pagkaantala.
Kumusta,
Ito ay magandang impormasyon at ito ay lubos na nakakatulong. Lazy Ito ay lubhang kapaki-pakinabang dahil ako ay gumagamit ng mga tema upang ipakita ang mga larawan.
Magandang Trabaho at Magpatuloy…!