Sebelumnya Saya pernah menuliskan cara membuat imbas animasi loading pada dikala halaman berpindah dengan cara menyeleksi semua tautan internal untuk memicu tampilnya overlay/tabir animasi dikala tautan tersebut diklik. Tapi metode ini mempunyai dua kelemahan:
Pertama, menyeleksi semua tautan internal dengan selektor atribut sebetulnya tidak begitu baik alasannya ialah selektor atribut itu performanya buruk.
Ke dua, jikalau kita mengeklik tautan internal yang mempunyai atribut target='_blank' di dalamnya, tautan tersebut akan terbuka di tab baru. Tapi imbas 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 mempunyai atribut target='_blank' memakai jQuery .filter():
$internalLinks.filter(':not([target="_blank"])').click(function() {});Tapi mulai kini lebih baik kita lupakan cara usang tersebut. Kita dapat membuat imbas animasi perpindahan halaman dengan kondusif memakai event beforeunload.
beforeunload ialah event yang akan terpicu dikala sebuah halaman mulai berpindah alasannya ialah 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 imbas `.fadeIn()`... });Kali ini tabir animasi ditampilkan bukan alasannya ialah terpicu oleh agresi klik pada tautan melainkan alasannya ialah agresi halaman yang mulai berpindah. Sehingga kita dapat merancang ulang tabir animasi perpindahan halaman dengan cara ini:
Anggaplah jQuery sudah terpasang di blog kita. Pertama, masuklah ke halaman editor HTML template, lalu letakkan arahan 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 arahan 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 imbas `.fadeIn()` $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>Klik Simpan Template.