Berawal dari rasa penasaran saya pada tampilan efek loading pada gambar (thumbnail) di beberapa blog, saya pun mencoba mencari tahu caranya untuk membuat tampilan gambar menjadi seperti itu dengan efek-efek keren nan memukau. Mungkin anda juga sering menjumpai tampilan seperti itu pada situs-situs besar atau blog-blog populer.
Efek loading ini biasanya muncul pada gambar homepage blog, halaman postingan, atau widget-widget yang menampilkan thumbnail (gambar) dari postingan blog. Ada yang berupa animasi seperti lingkaran berputar, kotak berjatuhan, tulisan bergerak, jam pasir, dan lain sebagainya. Cara kerjanya, efek loading ini akan muncul ketika gambar hendak tampil saat halaman discroll ke bawah, atau dengan kata lain muncul sebelum gambar berhasil dimuat.
Setelah saya mempelajari tentang cara pemasangan lazy load pada gambar untuk meningkatkan kecepatan loading blog, saya baru tahu ternyata efek loading ini dapat dibuat bersamaan dengan pemasangan lazy load, karena fungsi dari lazy load sendiri memang pada dasarnya untuk menunda tampilan gambar sebelum dimuat atau sebelum halaman discroll. Jadi intinya, efek loading pada gambar ini bisa ditambahkan saat pemasangan lazy load untuk gambar.
Tampilan efek loading berputar/ bergerak yang saya maksud misalnya seperti ilustrasi screenshot di bawah ini.
Bagaimana cara membuatnya menjadi seperti itu?, simak tutorial pemasangannya di bawah ini.
1. Buka akun blogger anda.
2. Pilih menu thema dan klik edit html.
3. Cari kode </body> dan letakkan kode berikut ini di atasnya.
<script>//<![CDATA[// LazyLoadfunction loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazyarlinas.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;//]]></script>
4. Selanjutnya yaitu memasang lazy load pada html gambar sekaligus untuk menambahkan efek loadingnya.
Masih di dalam html template, silahkan cari beberapa kode: <img ...
Misalnya seperti berikut ini:
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' itemprop='image'/>
Kalau sudah ketemu, silahkan:
- tambahkan class='lazy' setelah kode <img ...
- ganti kode src menjadi data-src
- tambahkan kode di bawah ini untuk membuat efek loadingnya:
src='https://flevix.com/wp-content/uploads/2020/01/Preloader.gif'
Jika sudah diterapkan, maka hasilnya akan menjadi seperti berikut ini:
<img class='lazy' expr:alt='data:post.title' expr:data-src='data:post.firstImageUrl' expr:title='data:post.title' itemprop='image' src='https://flevix.com/wp-content/uploads/2020/01/Preloader.gif'/>
Kalau anda punya gambar animasi loading sendiri, anda bisa ganti link di atas (ditandai warna merah) dengan link gambar gif milik anda. Atau anda juga bisa mencarinya lewat pencarian google, ada banyak gambar animasi untuk efek loading yang bisa anda pakai. Contohnya bisa kunjungi Link ini.
Ohya, kalau anda menemui kode gambar sudah ada class nya, misal seperti berikut ini:
<img class='image' expr:src='data:postFirstImage'/>
Maka tinggal tambahkan saja lazy di belakangnya, sehingga menjadi:
<img class='image lazy' expr:data-src='data:postFirstImage' src='https://flevix.com/wp-content/uploads/2020/01/Preloader.gif'/>
Sebagai informasi, kode <img ... pada html template mungkin ada banyak sehingga anda juga bisa terapkan cara di atas pada html gambar untuk widget-widget bergambar seperti popular post, related post, dan lainnya.
5. Simpan kembali template anda dan lihat hasilnya.
Cara Lainnya
Kalau anda merasa ribet dengan cara di atas, ada cara lainnya yang lebih praktis dan otomatis. Masuk edit html ➡ cari kode </body> dan cukup letakkan kode berikut ini di atasnya.
<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://flevix.com/wp-content/uploads/2020/01/Preloader.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>
Setelah disimpan, hasilnya akan sama seperti cara pertama di atas. Silahkan anda bisa pilih salah satu dari kedua cara di atas untuk memasangnya di blog anda.
Demikianlah tutorial kali ini tentang cara membuat efek loading keren sebelum pemuatan gambar di blog. Selain blog menjadi lebih keren karena adanya efek loading, skor kecepatan blog anda pun meningkat dengan menerapkan tutorial ini. Semoga bermanfaat. (Sumber)