Membuat Loading Blog Lebih Cepat dengan Meminimalisir Load Gambar

Tweet

Membuat Loading Blog Lebih Cepat dengan Meminimalisir Load Gambar - Hai sobat blogger, pada tutorial kali ini kita akan membahas bagaimana membuat loading blog lebih cepat hanya dengan meminimalisir load pada gambar yang ada. Ini juga akan memberikan efek pada gambar yang dinamis jika Anda scroll kebawah. Jadi ini akan sangat baik jika Anda membuat beberapa script dibawah ini, script? Yah sobat script, tetapi tenang saja ini mala memang membuat load gambar akan semakin cepat.

Jika sobat tidak percaya dengan script ini mala akan semakin cepat, Anda bisa mengetes load pada Iwebtool.com

Langkah Membuat Loading Blog Lebih Cepat dengan Meminimalisir Load Gambar :

1. Buka akun blogger Anda
2. Masuk ke menu edit HTML, tidak perlu centang expand template widget, karena kita tidak mencari script widget pada tutorial ini.
3. Cari kode dibawah ini :

</head>

     4.  Pastekan kode dibawah, diatas pada kode diatas :

<script type='text/javascript'>//<![CDATA[
(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 : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimrnL054Wss618k6exKgNXtmzqMXM-Xh4f9Xs9lT-rl89rITurhD9IzMaPCF0ZJF-30p5It0tqvCV82fopfpHs_KPlCrtLrszvlwio1NsRfwiqE-BLoK0Ewu9LZcT_w-ENWPPXjsCRWNA/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

5. Save template Anda.

Terima kasih, semoga bermanfaat.