Ini merupakan catatan bagaimana membuat effek loading saat halaman dimuat. Efek loading/pemuatan halaman yang satu ini bukan dipicu berdasarkan aksi klik pada tautan internal , namun dipicu berdasarkan selesainya pemuatan halaman blog Contohnya ada pada blog ini.
Okey ini kodingnya :
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://3.bp.blogspot.com/-_ONDmjNBMJs/TwPCL3AdlII/AAAAAAAAB4c/02MboPkAHGg/s1600/layer_loading.gif') no-repeat 50% 50%;
font:normal normal 0/0 a;
color:transparent;
text-shadow:none;
}
jquery letakan diatas </head> :
// hilangkan overlay dengan efek .fadeOut() jika keseluruhan halaman telah selesai dimuat
<script type='text/javascript'>
$(window).bind("load", function() {
$('#loading-overlay').fadeOut();
});
</script>
Resiko saat menerapkan efek ini adalah, jika script gagal terakses, tabir tidak akan bisa menghilang dan akan terus menutupi seluruh halaman. 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>
HTML <body>
<div id='loading-overlay'>Loading...</div>
sumber berita :
http://www.dte.web.id/2012/01/membuat-animasi-loading-dengan-jquery.html
2 Comments
Wahhhh, manteb banget Kang tutoriale. :)
BalasHapusTapi luwih manteb maneh gambare sing neng dhuwur kae lo Kang. :D
@eltelu
BalasHapusiya ki nggo obat mumet lumayan toww
» Komentar anda sangat berguna untuk peningkatan mutu posting
» Terima kasih bagi yang sudah menulis komentar.