Mecha versi 2.6.3 sudah dirilis!

Efek Animasi Loading dengan Event `beforeunload`

Tabel Konten
  1. Demo 
Loading

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.

Demo 

Lihat Demo

49 Komentar

Beben Koben

wah!!! apa-apan ini www.dte.web.id
keknya baru??? :-bd :Q

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:

#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:yellow url('img/loading.gif') no-repeat 50% 50%;
font:0/0 a;
text-shadow:none;
padding:1em 1.2em;
display:none;
}

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

document.body itu sangat mendasar, seharusnya sih bisa. Mungkin kamu memakai versi JQuery yang lama, yang tidak mendukung .on(). Sekarang malah sudah update ke versi 2.0.0b. Cuma mungkin, karena masih belum stabil jadi Saya belum berani ganti. Di halaman demo Saya memakai versi 1.9.0

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...

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Ambil saja salah satu versi yang terbaru, lalu buang sisanya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>

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!

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...

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... :(

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

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?

Unknown

Saya cari" di google muter" akhirnya ketemu juga di sini kang... makasih kang

Dwi

makasih mas ;)

Komentar telah ditutup.