Membuat Animasi Loading dengan jQuery · Bagian 2
Efek loading/pemuatan halaman yang satu ini bukan dipicu berdasarkan aksi klik pada tautan internal seperti pada artikel sebelumnya, namun dipicu berdasarkan selesainya pemuatan halaman:
Kuncinya sangat sederhana. Dengan menggunakan potongan kode ini, Saya akan menjalankan fungsi .fadeOut()
pada overlay/tabir hanya pada saat halaman telah selesai dimuat:
$(window).bind("load", function() {
...
});
Pekerjaan berikutnya hanya tinggal menciptakan tabir dengan elemen <div>
, kemudian atur agar lebar dan tingginya cukup untuk menutupi seluruh jendela. Letak yang ideal adalah di bawah <body>
:
HTML
<div id='loading-overlay'>Loading...</div>
CSS
#loading-overlay {
width:100%;
height:100%;
position:fixed !important;
position:absolute; /* IE6 Fallback */
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background:#3A3A3A url('http://lh5.googleusercontent.com/-NiAL93I5vds/U7kChKEbEAI/AAAAAAAAImw/3972BVpfhbw/s1600/layer-loading.gif') no-repeat 50% 50%;
font:normal normal 0/0 a;
color:transparent;
text-shadow:none;
}
Kemudian bangun fungsi jQuery yang akan menghilangkan tabir hanya jika keseluruhan halaman telah selesai dimuat:
// hilangkan overlay dengan efek .fadeOut() jika keseluruhan halaman telah selesai dimuat
$(window).bind("load", function() {
$('#loading-overlay').fadeOut();
});
Pahami Resiko
Resiko saat menerapkan efek ini adalah, jika script gagal terakses, tabir tidak akan bisa menghilang dan akan terus menutupi seluruh halaman Anda. Tapi itu bisa diatasi dengan cara menyisipkan kode CSS yang menyatakan bahwa tabir akan disembunyikan jika JavaScript dinonaktifkan. Caranya adalah dengan menggunakan tag <noscript>
seperti ini:
<noscript>
<style>
#loading-overlay {display:none}
</style>
</noscript>
Letakkan kode tersebut di atas </head>
26 Komentar
ricco
mantap kawand tutorial2nya..
keep sharing..
dan ane tinggal mantau aja.. :)
Unknown
naruh kodenya gimana mas taufikkkk...???? X@ X@ X@
Contoh resikonya gimana mas taufik,,, mohon di jelaskan :D :D :D
Taufik Nurrohman
@trii waluyo Coba nonaktifkan JavaScript di peramban yang kamu pakai:
Lalu muat ulang halaman demonya sekali lagi :drummer:
Unknown
@Taufik Nurrohman Q dah jadi si mas,, tapi loadingnya lama banget...
Mungkin gara-gara widget tertentu yang belum berhasil selesai dimuat jadi loadingnyA belum selesai... :(
Hmm,,,
Q kepenginnya loading ini supaya tidak halaman selesai dimuat mas ???
Paling loadingnya cuma beberapa detik aja ???
Q mau ngutak ngutik kode jQuerynya ga bisa mas ??? :'(
Mohon pencerahannya
Taufik Nurrohman
@trii waluyo Terapkan
setTimeout()
, lupakan$(window).bind("load")
Demo: http://jsfiddle.net/tovic/JknDk/
Unknown
@Taufik Nurrohman Q dah coba tetep ga bisa,, nunguin 5 detk malah ga ilang ilang tuh gambar...
Mungkin karena template aku si...
Lagian kalau dpasang ini,, slider aku pada hompage tetep aja ga ketutup, malah loadingnya yang ketutup sama slidernya
Gambar diatas loading yang sudah di terapkan diblog aku mas,, aku dah nungguin 5 detik malah ga ilang-ilang tu gambarnya...
Screenshot itu pun kalau q dah gulir kebawah,, kalau belum malah ketutup slidernya...
Q dah naruh jQuery sama HTMLnya,, jadi kaya gini
nyari kode <body> ga ada mas,,
adanya
:)
Taufik Nurrohman
@trii waluyo Itu sama saja, sama-sama tag
<body>
Jangan lupa kodenya diletakkan di dalam
$(function() {})
dan di dalam tag<script>
:Unknown
@Taufik Nurrohman Alhamdulialh mas taufik,, akhhirnya jadi juga... ;) \m/
Oh ya mas,, aku punya ide nie mas,, kira-kira loading ini bisa ga ya supya jangan tampil pada saat membuka halaman hompage ??? Q penginnya loading ini ga usah tampil pada saat hompage... Cuma pada artikel saja,
Soalnya kalau loading pada saat homepage aku tuh gambar loadingya ketutup efek slider trus menu fly out CSS3nya juga ga ketutup...
Gimana ya mas,,, ??? :-bd
Mohon pencerahannya :)
Taufik Nurrohman
@trii waluyo Oya, maaf. Itu Salah Saya. Saya lupa menuliskan
z-index
di sini:Sekarang seharusnya semua elemen akan tertutup tabir.
Unknown
@Taufik Nurrohman Berhasil mas,, tapi fly out cssnya ga ketutup...
Paling perbedaan kalau sudah dikasih z-index:999999; Read morenya ketutup sama back to top...
fly out cssnya ga ketutup mas,, :(
Apa emang dari sananya ya mas,, ???
Taufik Nurrohman
@trii waluyo Diperbesar saja nilainya, atau perkecil
z-index
pada menu Fly-Out.[note]Terkait: CSS3 Fly Out Menu[/note]
Unknown
@Taufik Nurrohman Oh ya mas,,,
z-index:999999; apa si mas ???
Penjelesannya apa mas taufik,, ???
Q pengin tahu lebih dalam tentang z-index:999999; :-bd
Di Fly Out CSS3 juga ada kode z-index:999999; nya ...
Surga Kenari
z-index itu semacam tiban meniban...
jadi semakin besar angka nya
semakin dia di atas / di luar tampilannya
kalo angkanya di perkecil, dia semakin di dalem / di bawah
Taufik Nurrohman
@trii waluyo [note]Baca: CSS Position[/note]
Surga Kenari
mas Taufik Nurrohman, punya saya kok yg nampil background nya dulu setelah itu baru gambar loadingnya?
Taufik Nurrohman
Latar lebih cepat terlihat dibandingkan gambar. Semakin besar gambar, semakin lama terlihat.
Surga Kenari
oh gtu ya mas,
mas Taufik blognya sangat ringan sekali saya rasakan..
mas coba bisa review blog saya sdkit? blog saya sudah ringan atau masih terlalu berat?
ada tips buat saya supaya lebih ringan sprti blog mas Taufik ?
Taufik Nurrohman
Hmh... Mungkin karena Saya jarang mampir jadi terasa agak lambat. Blog Saya rasanya cepat & ringan soalnya sering dikunjungi, jadi cache-nya sering tersimpan di peramban pengunjung. Yang penting ketahui semua bagian/widget yang memakan waktu, pelajari durasinya, tentukan prioritasnya :W
Unknown
mas..berarti loader ini, sm kyk punya urang karai ya mas [http://urang-kurai.blogspot.com/]
Taufik Nurrohman
Yep. Kalau tidak salah.
Unknown
Loadingnya ga Ketutp mas
Taufik Nurrohman
Coba set margin menjadi nol:
Unknown
nah mas taufik, gimana kalo seandainya hanya ditampilkan saat pengunjung pertama kali membuka blog kita saja, tapi loading gak akan ditampilkan lagi jika pengunjung tersebut pindah halaman ^_^
Taufik Nurrohman
Pakai Cookies:
EM
nah untuk membuat efek loading seperti pada blog ini caranya bagaimana mas?
apa blog ini juga memakai script tersebut di atas?
Yoshiewafa
Bagus mas tutorialnya :D, boleh dicoba nih.