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.. :)
By
ricco, at Friday, April 13, 2012 at 5:39:00 AM GMT+7
naruh kodenya gimana mas taufikkkk...???? X@ X@ X@
Contoh resikonya gimana mas taufik,,, mohon di jelaskan :D :D :D
By
Unknown, at Saturday, May 5, 2012 at 11:14:00 AM GMT+7
@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:
By
Taufik Nurrohman, at Saturday, May 5, 2012 at 1:03:00 PM GMT+7
@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
By
Unknown, at Saturday, May 19, 2012 at 1:51:00 AM GMT+7
@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/
By
Taufik Nurrohman, at Saturday, May 19, 2012 at 9:17:00 AM GMT+7
@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'>
:)
By
Unknown, at Saturday, May 19, 2012 at 10:30:00 AM GMT+7
@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>
By
Taufik Nurrohman, at Saturday, May 19, 2012 at 12:54:00 PM GMT+7
@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 :)
By
Unknown, at Saturday, May 19, 2012 at 9:41:00 PM GMT+7
@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.
By
Taufik Nurrohman, at Saturday, May 19, 2012 at 10:13:00 PM GMT+7
@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,, ???
By
Unknown, at Sunday, May 20, 2012 at 2:51:00 AM GMT+7
@trii waluyo Diperbesar saja nilainya, atau perkecil z-index pada menu Fly-Out.
[note]Terkait: CSS3 Fly Out Menu[/note]
By
Taufik Nurrohman, at Sunday, May 20, 2012 at 3:49:00 PM GMT+7
@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 ...
By
Unknown, at Sunday, May 20, 2012 at 5:14:00 PM GMT+7
@trii waluyo [note]Baca: CSS Position[/note]
By
Taufik Nurrohman, at Sunday, May 20, 2012 at 6:02:00 PM GMT+7
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
By
Surga Kenari, at Thursday, July 19, 2012 at 12:09:00 AM GMT+7
mas Taufik Nurrohman, punya saya kok yg nampil background nya dulu setelah itu baru gambar loadingnya?
By
Surga Kenari, at Thursday, July 19, 2012 at 12:16:00 AM GMT+7
Latar lebih cepat terlihat dibandingkan gambar. Semakin besar gambar, semakin lama terlihat.
By
Taufik Nurrohman, at Thursday, July 19, 2012 at 12:36:00 AM GMT+7
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 ?
By
Surga Kenari, at Thursday, July 19, 2012 at 1:44:00 PM GMT+7
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
By
Taufik Nurrohman, at Thursday, July 19, 2012 at 2:41:00 PM GMT+7
Yep. Kalau tidak salah.
By
Taufik Nurrohman, at Thursday, August 23, 2012 at 1:30:00 PM GMT+7
Coba set margin menjadi nol:
#loading-overlay {
margin:0 0;
}
By
Taufik Nurrohman, at Friday, February 1, 2013 at 8:23:00 PM GMT+7
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 ^_^
By
Unknown, at Sunday, February 10, 2013 at 8:24:00 AM GMT+7
Pakai Cookies:
if (readCookie('first-visit')) {
$('#loading-overlay').remove();
} else {
createCookie('first-visit', null, 1); // satu hari
}
By
Taufik Nurrohman, at Sunday, February 10, 2013 at 12:37:00 PM GMT+7
nah untuk membuat efek loading seperti pada blog ini caranya bagaimana mas?
apa blog ini juga memakai script tersebut di atas?
By
EM, at Saturday, May 11, 2013 at 1:02:00 AM GMT+7
Bagus mas tutorialnya :D, boleh dicoba nih.
By
Yoshiewafa, at Monday, July 7, 2014 at 8:19:00 PM GMT+7
Post a Comment
<< Home