Efek Animasi Loading dengan Event `beforeunload`

Jum’at, 18 Januari 2013

Tabel Konten

Demo

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

Jum’at, 18 Januari 2013 08:30 PM

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

Adi Nugraha Y

Jum’at, 18 Januari 2013 08:34 PM

Makasih ya mas :D

tes

Jum’at, 18 Januari 2013 08:57 PM

bro jika saya mau menambahkan sedikit animasi2 gitu gimana caranya ya ? supaya terlihat lebih keren dan menarik lagi

Taufik Nurrohman

Jum’at, 18 Januari 2013 09:19 PM

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

Jum’at, 18 Januari 2013 09:12 PM

Kak, kok aku malah gak berhasil nerapin yang baru ini, tapi yang lama malah bisa ?

IRIL SAGITA

Jum’at, 18 Januari 2013 09:21 PM

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

Jum’at, 18 Januari 2013 09:28 PM

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

Jum’at, 18 Januari 2013 09:35 PM

jQuery yang mana kak yang harus di ganti, kalau anda berkenan mohon untuk melihat di :

sagitasoft.com

IRIL SAGITA

Jum’at, 18 Januari 2013 10:32 PM

Apakah jQuery versi 1.7.1 belum mendukung kak, saya memakai versi itu ?

Taufik Nurrohman

Sabtu, 19 Januari 2013 07:36 AM

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

Sabtu, 19 Januari 2013 09:46 AM

Oh iya, maaf kak memang kesalahannya ada di situ, and sekarang udah berhasil. :D

makasih banget kak taufik ?

Secret Blog

Minggu, 20 Januari 2013 03:16 PM

mas, kok saya gagal ya?

terus ketika pasang jquery 1.9.0 kok fitur slide panel komentar jadi g berfungsi?

Taufik Nurrohman

Minggu, 20 Januari 2013 09:55 PM

Pakai cara sebelumnya saja kalau cara ini tidak berhasil.

Unknown

Minggu, 06 April 2014 11:57 AM

mana ya cara yng sebelumnya??

Unknown

Kamis, 31 Januari 2013 11:34 AM

maksih gan infonya,saya akan belajar banyak dari sini :)

obengkumana

Jum’at, 01 Februari 2013 03:18 PM

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

Jum’at, 01 Februari 2013 08:21 PM

Ehm... itu bukan template buatan Saya. Saya jarang membuat template. Mungkin punya Satank Mkr. Salam kenal juga.

Anonim

Senin, 25 Februari 2013 10:24 PM

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

Selasa, 26 Februari 2013 08:28 AM

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.