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:

Lihat Demo

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglnHf3Pjts8QywqLV2s5kdtYqyL6ZPUOHRPeq0PeSJcZKS_Bl79r8JeToCU6dOof9FosROpBT508HVV0dbYeFAnOJjNO5JPKsHIo-oMAOLOsRYkcjdVmU41GZf6TvcyDyDr38kByz88w/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 type='text/css'>
#loading-overlay {display:none}
</style>
</noscript>

Letakkan kode tersebut di atas </head>