Info Penting

Aplikasi Yasin dan Tahlil No 1 di Google dan Playstore

A plikasi Yasin dan Tahlil terbaik nomor 1 di Google dan Playstore kaya akan fitur dan konten yang bermanfaat untuk amalan sehari-hari u...

Info Penting

Artikel Terbaru

Percepat Loading Blog dengan Script Lazy Load Animasi

28 Apr 2018 - - 10

Mempunyai blog yang cepat saat dibuka tentu sangat diidamkan, cara mempercepat loading blog juga banyak cara, diantaranya sudah pernah saya bahas pada tulisan "Kompres CSS Blog, Agar Blog Semakin Ringan", bisa juga dengan memperkecil ukuran gambar telebih dulu sebelum diupload di postingan blog, ini juga pernah saya bahas di tulisan "Cara Posting Gambar di Blog", dan berbagai trik lain supaya blog semakin cepat saat dibuka pengunjung.


Pada kesempatan kali ini, saya akan membagikan trik mempercepat loading blog dengan menambahkan script JQuery Lazy Load efek animasi loading. Berikut langkah-langkah penerapanya pada template blog anda:

Langkah #1
Login blogger.com dengan akun gmail anda

Langkah #2
Klik menu Template - Edit HTML

Langkah #3
Copy dan paste script lazy load di bawah ini, tepat di atas kode </body>

<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 : 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/AVvXsEiMOKVeWyTs0q0UFrf9SuVlZ7S3mZBY0x3-k6hV0y_DI29FGIV7SpttwGlYL1GxEGom2b98hk8GZbnRTra5nf0AtWIxq5y-_Epqm7unk-DHHeoaQoF2gCl4Q7Us0sI_Tk5coX55Ih-uzDI/s1600/image-loader.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Langkah #4
Simpan template, dan silahkan anda lihat hasilnya.

Demikian tips Percepat Loading Blog dengan Script Lazy Load Animasi, semoga bermanfaat.

10 komentar

  1. yesss.... makasih pak, sudah dipraktekan dan berhasil.

    BalasHapus
  2. Terima kasih master, pas sudah dicoba dan tampaknya ok

    BalasHapus
  3. Akhirnya nemu juga script yang cocok, sdh di praktekkan dan pas bgt. makasih pak ,,,

    BalasHapus
  4. kecewa dengan blognya, script kga bsa dicopy..

    BalasHapus
    Balasan
    1. Sangat bisa, sekali klik di kode langsung terseleksi, tinggal di klik kanan salin saja.

      Hapus
  5. Terimakasih kang, sudah dicoba di blog.
    Semoga di workhsop SAGUSABLOG Lanjutan bisa belajar ini.
    hehe

    BalasHapus
  6. Terimakasih jadi tambah wawasan buat saya mas, salam dari blog pemula 🙏 bangalicb.blogspot.com

    BalasHapus

Follow Me

Foto Mr. Mung
ttd Mr. Mung

Tutorial Blogger

Pilih Arsip Blog