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

  • 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:

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

  • 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 :'(

  • 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

  • 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

    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.