Menampilkan Animasi Loading Saat Ajax Berlangsung Paling Praktis

Dengan AJAX (*) kita bisa lebih mudah membuat halaman melakukan pertukaran data antara server dan client tanpa harus meload halaman baru. Sehingga selain lebih cepat, juga tidak akan mengganggu jika dalam aplikasi sudah menampilkan konten lain. Kalau harus meload halaman baru maka biasanya akan hilang konten lainnya yang dibutuhkan.

Bagi yang belum paham apa itu AJAX, sekilas akan dijelaskan dibawah ini dinukil dari wikipedia tentang AJAX.

Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.

Meskipun memiliki keunggulan mampu melakukan pertukaran data tanpa reload halaman, namun AJAX juga memerlukan waktu melakukannya, semakin besar data yang diminta, dan semakin lambat koneksi internet, maka waktu yang dibutuhkan juga semakin lama.

Dalam jeda waktu itulah kita perlu memberikan sebuah pertanda kepada user bahwa proses sedang berjalan, karena bisa jadi disangka error kalau tidak ada tanda apapun.

Untuk memberikan indikasi bahwa AJAX sedang bekerja bisa dilakukan per perintah maupun secara global. Cara paling praktis adalah cara global, karena setiap kita membuat fungsi AJAX, tidak perlu lagi memberikan sebuah indikator, sehingga akan menghemat penulisan script yang berulang, apalagi kalau indikatornya itu-itu juga.

Contoh indikator yang bisa diletakkan per perintah misalnya animasi button dimana trigger AJAX diletakkan, animasi bisa seperti dibawah ini tampilannya, klik saja tombolnya.

Indikator semacam diatas harus selalu diberikan pada setiap pemicu trigger dan itu merepotkan sekali. Untuk mengatasi ini kita hanya perlu mendefinisikan sekali saja dengan perintah seperti dibawah ini dan di deklarasikan di awal halaman diload.

$( document ).ajaxStart( function() {
  // disini perintah ditulis saat ajax dimulai
}).ajaxComplete( function() {
  // disini perintah ditulis saat ajax selesai
});

Untuk bisa langsung dipraktekkan contoh loading AJAX berikut ini kombinasi perintah dari HTML, CSS, dan scriptnya.

HTML ( dimana saja di body )

<div id='ajax-wait'>
  <img alt='loading...' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigwGrqXFo-cT99SEBX_REBQ78cyiHe2jKbHTfD_CDb6KVyG7E4QvCJWrEVWjSNQpKMrO711YEWnsXRGJuMiJ3l8gBgpYRKhhOfVxfQ4VUInl5ud0YAiLkv1EzDbfKngxR-tIFVJg1acjo/s0/loading-x.gif' width='32' height='32' />
</div>

CSS

#ajax-wait {
  display: none;
  position: fixed;
  z-index: 1999
}

Javascript

$( document ).ajaxStart( function() {
  $( "#ajax-wait" ).css({
    left: ( $( window ).width() - 32 ) / 2 + "px", // 32 = lebar gambar
    top: ( $( window ).height() - 32 ) / 2 + "px", // 32 = tinggi gambar
    display: "block"
  })
}).ajaxComplete( function() {
  $( "#ajax-wait" ).fadeOut();
});

Jadi intinya, saat ada load data via AJAX apapun yang perintahnya dalam object jQuery, maka indikator akan tampil otomatis, tanpa harus memberi perintahnya di fungsi triggernya. Karena perintahnya itu di global jQuery Object.

Bagaimana contohnya? Gak usah jauh-jauh, di halaman ini silahkan coba di Recent Posts (klik tombol next dan prev), URL Shortener (klik), Tombol Daftar Emoticon di komentar help (klik akan memanggil script copy clipboard). Jika ingin contoh lainnya bisa dilihat di homepage loadmore, Halaman Sitemap. Atau kamu ingin mencoba memanggil data blogmu sendiri? Coba dihalaman ini.

Untuk sebuah blog dengan ajax maka loading halaman menjadi lebih cepat, karena hanya yang dibutuhkan saja diload saat awal. Konten lain yang gak diklik user ya gak usah dipanggil datanya. Apalagi pernah saya melihat ada tutorial membuat sitemap yang memanggil feed sampai max-results 9999, :-ss selain gak akan bisa karena maksimal 150, juga 150 itu saja sudah besar datanya, bagaimana kalau kontenmu ada 30.000 post? :((

Sekian dulu catatan kali ini, biar tidak lupa. Sebab catatan ini bukan untuk blog sebenarnya tapi untuk pemrograman lain di server hosting, hanya saja dicatat disini. Kalau ada yang penasaran bagaimana membuat fitur AJAX di blog dengan platform blogger.com, tunggu saja, insyaAllah kalau ada waktu tak tulis.