Membuat Animasi Loading dengan JQuery - Bagian 2

Written By Unknown on Kamis, 28 Juni 2012 | 10.56

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:

Lihat Demo

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();
});

Lihat Demo

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.

Share this article :

Fathur Blogz