Efek Animasi Loading dengan Event `beforeunload`
Tabel Konten
Sebelumnya Saya pernah menuliskan cara membuat efek animasi loading pada saat halaman berpindah dengan cara menyeleksi semua tautan internal untuk memicu tampilnya overlay/tabir animasi saat tautan tersebut diklik. Tapi metode ini memiliki dua kelemahan:
Pertama, menyeleksi semua tautan internal dengan selektor atribut sebenarnya tidak begitu baik karena selektor atribut itu performanya buruk.
Ke dua, jika kita mengeklik tautan internal yang memiliki atribut target='_blank'
di dalamnya, tautan tersebut akan terbuka di tab baru. Tapi efek animasi memuat halaman justru terpicu pada halaman sebelumnya, padahal kita tidak menghendaki itu ⇒ #c8644667892985451185. Saya sudah berhasil mengakalinya dengan cara memfilter tautan internal tersebut dengan cara mengecualikan tautan yang memiliki atribut target='_blank'
menggunakan jQuery .filter()
:
$internalLinks.filter(':not([target="_blank"])').click(function() {});
Tapi mulai sekarang lebih baik kita lupakan cara lama tersebut. Kita bisa menciptakan efek animasi perpindahan halaman dengan aman menggunakan event beforeunload
.
beforeunload adalah event yang akan terpicu saat sebuah halaman mulai berpindah karena seorang pengguna mengeklik tautan tertentu (atau sekedar memuat ulang halaman dengan cara mengeklik tombol Reload pada peramban) yang memicu mereka untuk keluar dari halaman tersebut:
$(window).on("beforeunload", function() {
// Menampilkan tabir animasi dengan efek `.fadeIn()`...
});
Kali ini tabir animasi ditampilkan bukan karena terpicu oleh aksi klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang tabir animasi perpindahan halaman dengan cara ini:
Anggaplah jQuery sudah terpasang di blog kita. Pertama, masuklah ke halaman editor HTML template, kemudian letakkan kode CSS ini di atas ]]></b:skin>
atau </style>
:
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background-color:black;
color:white;
padding:1em 1.2em;
display:none;
}
Kemudian sisipkan kode ini di atas </body>
:
<script>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
// ... tampilkan tabir animasi dengan efek `.fadeIn()`
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
Klik Simpan Template.
49 Komentar
Beben Koben
wah!!! apa-apan ini www.dte.web.id
keknya baru??? :-bd :Q
Adi Nugraha Y
Makasih ya mas :D
tes
bro jika saya mau menambahkan sedikit animasi2 gitu gimana caranya ya ? supaya terlihat lebih keren dan menarik lagi
Taufik Nurrohman
Tinggal dikreasikan sendiri. Misalnya diberi latar animasi:
Demo: http://jsfiddle.net/tovic/78pNK/1/
IRIL SAGITA
Kak, kok aku malah gak berhasil nerapin yang baru ini, tapi yang lama malah bisa ?
IRIL SAGITA
Pa mungkin blog aku gak suport ama :
$(document.body)
soalnya pada emoticon yang ada code $(document) juga gak bisa berfungsi, mohon kak taufik bantuannya ?
Taufik Nurrohman
IRIL SAGITA
jQuery yang mana kak yang harus di ganti, kalau anda berkenan mohon untuk melihat di :
sagitasoft.com
IRIL SAGITA
Apakah jQuery versi 1.7.1 belum mendukung kak, saya memakai versi itu ?
Taufik Nurrohman
Hehehe... jangan dipasang sekaligus begitu...
Ambil saja salah satu versi yang terbaru, lalu buang sisanya:
IRIL SAGITA
Oh iya, maaf kak memang kesalahannya ada di situ, and sekarang udah berhasil. :D
makasih banget kak taufik ?
Secret Blog
mas, kok saya gagal ya?
terus ketika pasang jquery 1.9.0 kok fitur slide panel komentar jadi g berfungsi?
Taufik Nurrohman
Pakai cara sebelumnya saja kalau cara ini tidak berhasil.
Unknown
mana ya cara yng sebelumnya??
Unknown
maksih gan infonya,saya akan belajar banyak dari sini :)
obengkumana
baru ketemu web ini. dari kemarin2 hanya bisa ber-angan2 memliki blog dengan fitur web standar yg dilengkapi jquey, ajax dkk. :-bd salam kenal, dari pendatang baru. template om sedkit saya modifkasi menambahkan fixed top menu > blog.obengkumana.com,
Taufik Nurrohman
Ehm... itu bukan template buatan Saya. Saya jarang membuat template. Mungkin punya Satank Mkr. Salam kenal juga.
Anonim
permisi mas ,
pengen tanya ,
kenapa yah efek loading ini tidak bisa atau sama sekali tidak bisa dimasukkan elemen css lainnya ,
seperti css loading ,
seperti demo ini : http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-loading-animation-loop-set2/index.html
kenapa gak bisa yah mas..?
need help :)
Taufik Nurrohman
Letakkan kode HTML di dalam
<div id="page-loader"></div>
, dan sertakan kode CSS animasi loading di halaman tersebut di bawah kode CSS yang Saya tuliskan.Anonim
wuih keren tapi url gambar yang bagus cari dimana yah ? :-a
Dixy
pakek css aja...
lebih keren... :p
Bima Aditama
gan kok di blog saya jadi tulisan loading... gak seperti di demo ?
Unknown
Mas template ku HTML Valide 5 jadi ga ada jquery nya Gimna masangin jquery di HTML valide 5!
Taufik Nurrohman
JQuery tidak akan mempengaruhi validasi.
Unknown
mas, mau tanya aku udah praktekin cara ini tapi hanya bisa berhasil saat klik link dari homepage saja, sedang saat di halaman lain tetep loading seperti biasa, cara mengatasinya bagaimana ya mas??? makasih ya sebelumnya... :)
Taufik Nurrohman
Mungkin kode CSS-nya keliru dimasukkan ke dalam tag
<style>
yang berada di dalam tag kondisional.Unknown
iya mas, tp kalo saya letakkan diatas ]]> juga ga bisa bahkan di homepage nya pun hanya loading seperti biasa...
Unknown
mas, udah bisa kok tapi saya pake tutor yang menggunakan jQuery kalau yg ini udah dicoba beberapa kali ga bisa juga...:) makasih ya mas...
Unknown
Mas saya udh pasang.
mau tanya ni,
sama kyk prtanyaan Mas "Jefrry, dsitu mas kan udh jawab tu prtnyaanya. Nah saya udh coba mas. Tapi kok animasi loadingnya gamuncul :'(
Taufik Nurrohman
Mungkin ini terkait ⇒ /2011/12/membuat-efek-animasi-loading-sederhana.html?showComment=1366260641986#c7531280663956572640
Unknown
masi gabisa mas.
.. Ok lah mas gpp. Terima Kasih. :)
Anonim
Asiik udah berhasil gan cakep :D
Kang Ismet
Bisa dibuat pengecualian ga gan? soalnya saya pasang animasi loading pada form komentar, pas komentar di publish, jadi ada dua gitu efek loadingnya.
Unknown
Work mas, hehehehe thank's \o/
Admine
gila ga kepikiran ya... bagus banget :-bd \o/
terima kasih mas Taufik Nurrohman
Wildan MR
Wah gan ane ga work di website , emang jquerynya pake versi yang mana?
Wildan MR
Kalo di blog sih ada , tapi buat di halaman offline(pake jquery 1.8.3.min) . Tetep ga muncul gan
Unknown
mas, disaya ga keluar animasi loadingnya... :(
Unknown
thank for this post http://www.dte.web.id/2013/01/efek-animasi-loading-dengan-event.html
Sugrahaku
mas, di blog saya kok effect ny ga bisa ya? kesalahan dmn? bisa tolong di cek T.T
sugrahaku.com
Unoz
=p* makasih mas salam kenal, visit back blog baruku cms-teknologi.blogspot.com
Unknown
Berhasil gan,
ngomong-ngomong kalau mau ganti effect animasi gmn ya gan ? ~x(
Unknown
Komentar ini telah dihapus oleh pengarang.
Anonim
bisa lihat komentar disini masbero http://www.dte.web.id/2013/01/efek-animasi-loading-dengan-event.html?showComment=1358518741306#c8005670485318104370
Unknown
mantap gan, kunjungi juga ya blog saya http://www.prediksibola888.blogspot.com/
Unknown
mas mau nanya apakah dengan memakai ini akan mempercepat loading blog juga mas? seperti lazyload?
Taufik Nurrohman
Tidak. Ini cuma efek.
Unknown
Saya cari" di google muter" akhirnya ketemu juga di sini kang... makasih kang
Dwi
makasih mas ;)