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:
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/AVvXsEjJueqs5HCmWjFloC5fWcuS-Efz706MUYcnJahYRMWeYO8JrOb_AuzcVVJQUkn07BAJNSXmF8_Y1u7uVjK-cav3OJ4F49DzIroGvJ2xhAEL2GX4067jmNsa17hgB_yXLF1U_vbSmBbFczQ/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>
#loading-overlay {display:none}
</style>
</noscript>Letakkan kode tersebut di atas </head>
24 Comments:
mantap kawand tutorial2nya..
keep sharing..
dan ane tinggal mantau aja.. :)
naruh kodenya gimana mas taufikkkk...???? X@ X@ X@
Contoh resikonya gimana mas taufik,,, mohon di jelaskan :D :D :D
@trii waluyo Coba nonaktifkan JavaScript di peramban yang kamu pakai:
http://1.bp.blogspot.com/-xId2grkLeA4/T3GABmsVgTI/AAAAAAAACZs/hSFtEMjvN0A/s1600/disable-the+javascript.png
Lalu muat ulang halaman demonya sekali lagi :drummer:
@Taufik Nurrohman Q dah jadi si mas,, tapi loadingnya lama banget...
Mungkin gara-gara widget tertentu yang belum berhasil selesai dimuat jadi loadingnyA belum selesai... :(
Hmm,,,
Q kepenginnya loading ini supaya tidak halaman selesai dimuat mas ???
Paling loadingnya cuma beberapa detik aja ???
Q mau ngutak ngutik kode jQuerynya ga bisa mas ??? :'(
Mohon pencerahannya
@trii waluyo Terapkan setTimeout(), lupakan $(window).bind("load")
setTimeout(function() {
$('#loading-overlay').fadeOut();
}, 5000); // Akan menghilang dalam waktu 5 detik
Demo: http://jsfiddle.net/tovic/JknDk/
@Taufik Nurrohman Q dah coba tetep ga bisa,, nunguin 5 detk malah ga ilang ilang tuh gambar...
Mungkin karena template aku si...
Lagian kalau dpasang ini,, slider aku pada hompage tetep aja ga ketutup, malah loadingnya yang ketutup sama slidernya
http://2.bp.blogspot.com/-A5suyorNag0/T7cRslf8SpI/AAAAAAAAAmY/iuqIsboydNA/s400/Image+4.jpg
Gambar diatas loading yang sudah di terapkan diblog aku mas,, aku dah nungguin 5 detik malah ga ilang-ilang tu gambarnya...
Screenshot itu pun kalau q dah gulir kebawah,, kalau belum malah ketutup slidernya...
Q dah naruh jQuery sama HTMLnya,, jadi kaya gini
setTimeout(function() {
$('#loading-overlay').fadeOut();
}, 5000);
</head>
<div id='loading-overlay'>Loading...</div>
<body expr:class='"loading" + data:blog.mobileClass'>
<div id='header-wrapper'>
nyari kode <body> ga ada mas,,
adanya
<body expr:class='"loading" + data:blog.mobileClass'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Mob3se7en™ (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<data:description/>
</b:includable>
<b:includable id='main'>
:)
@trii waluyo Itu sama saja, sama-sama tag <body>
Jangan lupa kodenya diletakkan di dalam $(function() {}) dan di dalam tag <script>:
<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#loading-overlay').fadeOut();
}, 5000);
});
//]]>
</script>
@Taufik Nurrohman Alhamdulialh mas taufik,, akhhirnya jadi juga... ;) \m/
Oh ya mas,, aku punya ide nie mas,, kira-kira loading ini bisa ga ya supya jangan tampil pada saat membuka halaman hompage ??? Q penginnya loading ini ga usah tampil pada saat hompage... Cuma pada artikel saja,
Soalnya kalau loading pada saat homepage aku tuh gambar loadingya ketutup efek slider trus menu fly out CSS3nya juga ga ketutup...
Gimana ya mas,,, ??? :-bd
Mohon pencerahannya :)
@trii waluyo Oya, maaf. Itu Salah Saya. Saya lupa menuliskan z-index di sini:
#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;
}
Sekarang seharusnya semua elemen akan tertutup tabir.
@Taufik Nurrohman Berhasil mas,, tapi fly out cssnya ga ketutup...
Paling perbedaan kalau sudah dikasih z-index:999999; Read morenya ketutup sama back to top...
fly out cssnya ga ketutup mas,, :(
Apa emang dari sananya ya mas,, ???
@trii waluyo Diperbesar saja nilainya, atau perkecil z-index pada menu Fly-Out.
[note]Terkait: CSS3 Fly Out Menu[/note]
@Taufik Nurrohman Oh ya mas,,,
z-index:999999; apa si mas ???
Penjelesannya apa mas taufik,, ???
Q pengin tahu lebih dalam tentang z-index:999999; :-bd
Di Fly Out CSS3 juga ada kode z-index:999999; nya ...
@trii waluyo [note]Baca: CSS Position[/note]
z-index itu semacam tiban meniban...
jadi semakin besar angka nya
semakin dia di atas / di luar tampilannya
kalo angkanya di perkecil, dia semakin di dalem / di bawah
mas Taufik Nurrohman, punya saya kok yg nampil background nya dulu setelah itu baru gambar loadingnya?
Latar lebih cepat terlihat dibandingkan gambar. Semakin besar gambar, semakin lama terlihat.
oh gtu ya mas,
mas Taufik blognya sangat ringan sekali saya rasakan..
mas coba bisa review blog saya sdkit? blog saya sudah ringan atau masih terlalu berat?
ada tips buat saya supaya lebih ringan sprti blog mas Taufik ?
Hmh... Mungkin karena Saya jarang mampir jadi terasa agak lambat. Blog Saya rasanya cepat & ringan soalnya sering dikunjungi, jadi cache-nya sering tersimpan di peramban pengunjung. Yang penting ketahui semua bagian/widget yang memakan waktu, pelajari durasinya, tentukan prioritasnya :W
Yep. Kalau tidak salah.
Coba set margin menjadi nol:
#loading-overlay {
margin:0 0;
}
nah mas taufik, gimana kalo seandainya hanya ditampilkan saat pengunjung pertama kali membuka blog kita saja, tapi loading gak akan ditampilkan lagi jika pengunjung tersebut pindah halaman ^_^
Pakai Cookies:
if (readCookie('first-visit')) {
$('#loading-overlay').remove();
} else {
createCookie('first-visit', null, 1); // satu hari
}
nah untuk membuat efek loading seperti pada blog ini caranya bagaimana mas?
apa blog ini juga memakai script tersebut di atas?
Bagus mas tutorialnya :D, boleh dicoba nih.
Post a Comment
<< Home