Halo teman-teman semuanya kembali lagi bersama dengan saya di blog kita bersama kali ini kita akan membahas mengenai cara memasang loading di halaman website menggunakan Javascript dan jquery
Sebelumnya mungkin teman-teman sudah mengetahui apa itu loading dan apa fungsinya, nahh loading itu adalah proses dimana website kita meminta informasi ke server sama seperti di dunia nyata seperti kita memesan sebuah makanan dan pastinya penjual akan memproses makanan kita, nahh analogi loading itu di ibaratkan ketika kita menunggu makanan tersebut disiapkan, dan apa fungsinya loading ini dibuat?, nahh untuk fungsi loading ini sebenarnya hanyalah untuk memberikan informasi mengenai proses loading, atau biasa kita sebut dengan tampilannya, supaya kita mengetahui proses yang terjadi pada website tersebut,
nahh tanpa berlama-lama langsung saja kita masuk ke dalam langkah-langkah cara pemasangan loading pada halaman website
Hal yang pertama kali yang harus anda lakukan ialah dwonload tampilan load nya dengan extensi .gif bisa anda klik LINK INI untuk mendwonloadnya, dan silahkan pilih tampilan loading yang anda inginkan
Langkah 1. Buat file dengan nama index.html
silahkan copy source code dibawah ini :
Keterangan :
untuk Tag IMG Sourcenya arahkan ke file gif yang teman-teman sudah dwonload tadi, disitu saya menggunakan img load1.gif
Langkah 2. Membuat load menggunakan Javascript
Silahkan teman-teman Copy code di bawah ini dan pastekan dibawah class Loader di source code yang anda copy diatas
Keterangan script:
const loader => Berfungsi untuk mengambil elemen id loader
window.addEventListener('load',function()) =>berfungsi jika halaman yang sudah di load maka loader akan di hilangkan
Langkah 3. Membuat load menggunakan Jquery
untuk membuat load menggunakan jquery sangat lah mudah,yakni cukup copy source code dibawah ini dan pastekan diatas taq javascript diatas, dan jangan lupa taq script javascript diatas dihapus terlebih dahulu,
Keterangan Script :
$('#loader').fadeOut("slow"){} =>berfungsi untuk menghilangkan id loader jika halaman sudah selesai di load
Nahh jika source code diatas sudah anda jalankan maka tampilannya akan seperti gambar dibawah ini jika di halaman website sedang load
Sekian penjelasan dari cara memasang loading pada halaman website jika ada yang kurang segera tinggalkan pesan di kolom komentar,
Baca juga : Belajar Jquery untuk pemula
0 Komentar