Masalah yang biasanya sulit dipecahkan ialah perihal cara menyeleksi elemen berupa tautan internal. Sampai beberapa ketika yang kemudian Saya menemukan ini.
Berikut ini ialah langkah singkat untuk membuatnya:
Salin instruksi CSS ini, letakkan di atas instruksi ]]></b:skin> atau </style>:
#page-loader { position:fixed; top:0; left:0; background-color:#fff; z-index:9999; text-align:center; width:100%; height:100%; padding-top:70px; font:bold 50px Calibri,Arial,Sans-Serif; color:#000; display:none; }Kemudian tambahkan instruksi ini di atas </body>:
<div id='page-loader'>Loading...</div>Setelah itu buat fungsi jQuery sederhana dengan pertolongan script untuk menemukan link internal:
$(function() { var siteURL = "//" + top.location.host.toString(); var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']"); $internalLinks.click(function() { $('#page-loader').fadeIn(1500).delay(6000).fadeOut(1000); }); // Hilangkan overlay ketika diklik untuk mengatasi gangguan, terutama jikalau link internal diset dengan target='_blank' $('#page-loader').click(function() { $(this).hide(); }); });Letakkan script tersebut di atas instruksi </head>
Klik simpan dan coba muat ulang halaman blogmu, kemudian coba klik salah satu tautan internal di dalam blogmu dan lihat apa yang akan terjadi...
Tambahan:
Jika Anda pemakai jQuery versi di bawah 1.4.0, Anda harus menambahkan plugin delay sebelum menjalankan fungsi .delay() alasannya ialah fungsi .delay() pada jQuery hanya terdapat pada jQuery versi 1.4 dan di atasnya:
Plugin Delay untuk jQuery versi 1.4-
$.fn.delay = function(time, callback) { // Empty function: jQuery.fx.step.delay = function(){}; // Return meaningless animation, (will be added to queue) return this.animate({delay:1}, time, callback); }