Cara Memasang script lazy load image untuk percepat loading blogger

Di antara fungsi lazy load adalah untuk mempercepat loading blog, Dengan memasang lazy load di blog untuk mengoptimumkan loading blog supaya tidak membebankan pelayar apabila halaman blog dibuka. Pertanyaan lazy load ini berfungsi apabila halaman mula di scroll ke bawah secara automatik lazy load akan berfungsi.

Info
Tetapi sebelum memulakan proses pengeditan, anda perlu terlebih dahulu membuat Backup template blog anda.

Juga pastikan sebelum memuat naik imej ke laman web anda:

- Kompres imejPerkara yang perlu semasa memuat naik imej ke blog, Sentiasa Kompres imej supaya saiz imej menjadi kecil sehingga tidak membebankan blog apabila dimuat.

- Tambah imej alt
Menambah imej alt sangat penting untuk pengoptimalan SEO, jadi Googlebot memahami imej yang anda gunakan.


Bagaimana untuk memasang lazy load?
Log masuk ke blogger tab tema dan edit html dan pasang code di bawah.
Pasangkan code ini di atas code</body> dan Jangan lupa untuk memasang skrip jquery pada blog anda.

Cara Pertama :

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : -200, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : -200, container: window})","right-of-fold":"$.rightoffold(a, {threshold : -200, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : -200, container:window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixsYkvWcEutMuJJI-zdva5zgzNLeL7bGyWZDBEXpG5ykqrHhCq4MmtJsZIiaoNan5X6TamMFicUOTNy0-MKbJGT8pw_qCJsLLa5MkIREseZfY5y37qdSyFEAOcXbDjoZIV4JBJ8a28duMH/s320/ezgif.com-resize.gif",effect:"fadeIn",threshold:"-200"})});
//]] >
</script>

Gantikan https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixsYkvWcEutMuJJI-zdva5zgzNLeL7bGyWZDBEXpG5ykqrHhCq4MmtJsZIiaoNan5X6TamMFicUOTNy0-MKbJGT8pw_qCJsLLa5MkIREseZfY5y37qdSyFEAOcXbDjoZIV4JBJ8a28duMH/s320/ezgif.com-resize.gif sesuai loading image yang anda mahukan, Dan setelah selesai memasang code di atas, silakan save template anda.

Cara kedua :

Cara kedua ini agak panjang sedikit dan agak banyak yang perlu di ubah dan di pasang di template anda. Berikut cara caranya.

Dengan cara yang sama, Pasangkan javascript berikut di atas code /body

<script type="text/javascript">
//<![CDATA[
//LazyLoad Image
function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://rawgit.com/mastamvan/backup/master/lazyload.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Setelah selesai memasang javascript di atas, anda perlu mengubah semua code image yanga ada di blogger anda.

Contoh code image anda

<img expr:src ="data:post.thumbnailUrl" expr:alt="data:post.title"/>

Tambahkan code seperti code di bawah

<img class="lazy" expr:src ="data:post.thumbnailUrl" data-src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">

Maksudnya semua image yang anda pasang harusla mempunyai class='lazy' dan data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=.

Setelah selesai memasang code di atas, save template anda.

Rfresh blog anda untuk melihat hasilnya, Baiklah somga apa yang saya kongsikan tentang Cara Memasang script lazy load image untuk percepat loading blogger dapat membantu anda.