-->

K.E ^_~ Yang lagi galau ini penawarnya link

Animasi loading dengan jquery sebelum halaman dimuat

Saat link internal pada blog di klik maka akan ditampilkan gambar animasi seperti di atas dan akan menghilang saat seluruh halaman selesai di load. Bagaimana membuatnya?

Script ini hanya sebagai catatan pribadi, sengaja saya posting di sini agar tidak perlu mencari kemana-mana saat saya membutuhkannya :D

Pemasangan untuk blogger letakkan kode css berikut di atas ]]></b:skin> atau </style>


#page-loader {
  position:fixed;
  top:0;
  left:0;
  background:url('http://3.bp.blogspot.com/-tw9VXRBNQaY/UIlprtdD0MI/AAAAAAAABfg/2hsLhOahqbI/s1600/loading40.gif')no-repeat center center #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;
}


Kode HTML letakkan sebelum </body>


<div id='page-loader'></div>


Jquery letakkan sebelum </head>


$(function() {
    var siteURL = "http://" + 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 saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#page-loader').click(function() {
        $(this).hide();
    });
});


comment 1 komentar

Catatan:
Seluruh komentar yang masuk akan dimoderasi terlebih dahulu. Komentar yang berbau spam, kasar, menghina, seluruhnya yang bersifat menghancurkan bukan membangun tidak akan ditampilkan. Silahkan bertanya dan memberi pendapat dengan sopan dan sesuai aturan.

Anda diperbolehkan mempublikasikan ulang artikel ini, dengan syarat:
1. Mintalah izin dengan cara berkomentar di bawah artikel ini
2. Wajib menyertakan link ke artikel ini dan menyertakan nama penulis

 
© Klikedukasi 2008 - 2013 | Design by Panembahan Satyapradana | 170p3x