Efek loading/pemuatan halaman yang satu ini bukan dipicu berdasarkan aksi klik pada link 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 hanya pada saat halaman telah selesai dimuat:$(window).bind("load", function() {
...
});Pekerjaan berikutnya hanya tinggal menciptakan overlay/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:0px;
right:0px;
bottom:0px;
left:0px;
z-index:999999;
background:#3A3A3A url(http://3.bp.blogspot.com/-_ONDmjNBMJs/TwPCL3AdlII/AAAAAAAAB4c/02MboPkAHGg/s1600/layer_loading.gif) no-repeat center;
color:transparent !important;
text-indent:-99999px;
}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 website Anda.
EmoticonEmoticon