Pada kesempatan kali ini saya akan menjelaskan cara membuat loading spinner gambar dengan jquery. Perlu teman-teman ketahui sebelumnya, apabila website yang teman-teman buat terlalu lama waktu tunggu atau loading time dalam menampilkan gambar tentunya sangat memakan waktu pengunjung dan sangat membosankan pengunjung. Lamanya loading tersebut salah satu penyebabnya adalah ukuran gambar yang terlalu besar, lantas kenapa tidak dengan cara diperkecil ulang ukuran gambar tersebut ? Tentunya cukup memakan waktu jika teman-teman merubahnya satu persatu dari setiap gambar yang ada di website teman-teman, dan menurut saya cara tersebut kurang efisien. Pada contoh di sini saya akan menjelaskan cara membuat loading spinner gambar dengan jquery tanpa harus merubah ukuran gambar satu-persatu, sebenarnya pada contoh penjelasan disini hanya saya variasikan dengan loading spinner pada saat melakukan pemrosesan pemanggilan gambar, sehingga tidak membosankan pengunjung, dikarenakan dari loading spinner tersebut memberitahukan kepada pengunjung bahwa website sedang melakukan request pemanggilan gambar. Pada contoh di sini saya menggunakan plugin loading spinner image yang bisa teman-teman kombinasikan di website yang teman-teman buat.

Berikut Tahapannya :

  • Teman-teman buat terlebih dahulu satu buah file dengan nama index.html, dan ketikan kode seperti berikut :

  • Jika sudah bisa teman-teman save file tersebut terlebih dahulu
  • Dan buat satu buah file js dengan nama contohLoading.js yang tata letaknya sejajar dengan file index.html, selanjutnya ketikan kode seperti berikut:

Untuk pembahasan selanjutnya, akan saya jelaskan cara membuat loading spinner gambar dengan jquery pada sesi berikutnya, semoga bermanfaat.