 |
| Sumber : http://www.blog.jonico.org/ |
Lazy Load adalah sebuah script JQuery yang digunkan untuk membantu mempercepat konten dari sebuah laman blog. Cara kerja script ini cukup simple, yakni script akan menampilkan konten text (tulisan) terlebih dahulu, sehingga para pengunjung akan mendapatkan penjelasan konten lebih cepat. Setelah konten text sudah sepenuhnya ditampilkan, maka selanjutnya akan menampilkan konten gambar (img) secara berurutan dari atas sampai bawah. hal ini akan sangat membantu dalam proses loading dibanding harus memuat seluruh gambar secara bersamaan.
MENGGUNAKAN SCRIPT LAZY LOAD UNTUK MEMPERCEPAT LOADING BLOG
Dalam penggunaannya, script ini sangatlah mudah. Kita hanya akan menempatkan script JQuery di bagian kode template blog kita. untur mempersingkat waktu, maka akan saya berikan tutorialnya saja. Karena saya yakin saat ini banyak orang (mungkin anda salah satunya) yang suka praktik langsung dibanding banyak teori (ini prinsip anak SMK hehehehe..)
1. Silahkan copy script yang ada di bawah ini.
<script type='text/javascript'>//<;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/AVvXsEhgEpGlkjsJJKLEhH_ApzL5XFyQg5agFTZ6aHPIxCMI_QbiOuZ-9I3EIcsPjws6k1k0RjunzHaEpMxGUkxPDmmKiKGZpgX0KsTe9DuQ9ZpeYDVKHreLBkBILDIqk-ype02xrCX6T_7Sr93c/s1600/banner.png",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>
2. Buka Blogger > Tema > Edit HTML
3. Cari kode </body> dan paste kode ini diatas kode tersebut.
4. Save template dan coba cek dengan membukanya di perangkat lain. Jika tidak memungkinkan anda dapat melakukan cek pada situs GTMatrix
Dengan begitu, halaman yang akan dikunjungi akan lebih cepat memuat konten text yang dibutuhkan. Walau lebih cepat dan lebih bermanfaat, bukan berarti tidak memiliki efek samping. Untuk dampak penggunaan script Lazy Load ini akan saya bahas di artikel selanjutnya.
4.
Mempercepat Loading Blog dengan Lazy Load
4/
5
Oleh
serpzen