Efek loading/pemuatan halaman yang satu ini bukan dipicu menurut agresi klik pada tautan internal ibarat pada artikel sebelumnya, namun dipicu menurut selesainya pemuatan halaman:
Kuncinya sangat sederhana. Dengan memakai potongan instruksi ini, Saya akan menjalankan fungsi .fadeOut() pada overlay/tabir hanya pada dikala halaman telah akibat dimuat:
$(window).bind("load", function() { ... });Pekerjaan berikutnya hanya tinggal membuat tabir dengan elemen <div>, lalu atur biar lebar dan tingginya cukup untuk menutupi seluruh jendela. Letak yang ideal yaitu 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/AVvXsEiPyHvo9lDrLoMChkHPdRH9o43I1RhaUhJo9PL1yN8C6SXuvYj8wIA3vpd8P2aufNz2thTn4ui1efzE1FRdWCVDvSEK0rDR1bGH4RwgWJ-UbcCu_MJ1GecUtKYbbZdOWLda-a8rAeOVJyc/s1600/layer-loading.gif') no-repeat 50% 50%; font:normal normal 0/0 a; color:transparent; text-shadow:none; }Kemudian berdiri fungsi jQuery yang akan menghilangkan tabir hanya jikalau keseluruhan halaman telah akibat dimuat:
// hilangkan overlay dengan imbas .fadeOut() jikalau keseluruhan halaman telah akibat dimuat $(window).bind("load", function() { $('#loading-overlay').fadeOut(); });Pahami Resiko
Resiko dikala menerapkan imbas ini adalah, jikalau script gagal terakses, tabir tidak akan dapat menghilang dan akan terus menutupi seluruh halaman Anda. Tapi itu dapat diatasi dengan cara menyisipkan instruksi CSS yang menyatakan bahwa tabir akan disembunyikan jikalau JavaScript dinonaktifkan. Caranya yaitu dengan memakai tag <noscript> ibarat ini:
<noscript> <style> #loading-overlay {display:none} </style> </noscript>Letakkan instruksi tersebut di atas </head>