Membuat Page Loading Dengan JQuery

Oleh Bardil

11 Juli, 2014

Bagikan :

Tweet

Membuat Page Loading Dengan JQuery - Membuat page loading sebuah web atau blog bisa menggunakan flash atau JQuery. Pada kesempatan mari kita belajar membuat page loading memnggunakan JQuery. Page loading adalah satu fitur untuk menampilkan efek loading ketika perpindahan page. Dimana pada perpindahan halaman blog akan ditampilkan gambar atau animasi tertentu. Dengan page loading ini diharapkan sebagai indikator dan agar waktu load page tidak terasa lama bagi visitor. Selain itu dengan page loading blog akan terlihat lebih menarik. Demo bisa dilihat pada blog ini ketika perpindahan page akan muncul logo devilzart dengan tabir hitam transparan. Atas request dari salah satu visitor blog ini maka pada kesempatan ini mari kita belajar bersama bagaimana cara membuat page loading dengan JQuery yang smooth dan menarik untuk dilihat. Saatnya kita modif modifan template.

Dalam membuat page loading dengan JQuery ini kita membutuhkan suatu gambar animasi atau gambar apa saja untuk di load. Buatlah sebuah gambar dengan ukuran yang pas, saya recomendasi 200 x 200 pixel agar gambar page loading tidak pecah. Selanjutnya upload ke image hosting kesayangan sobat.

Sebelumnya meletakan script page loading blogger, pastikan sobat blogger sudah meletakan plugin jquery pada template sobat. Jika belum silahkan letakan kode dibawah ini diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>

Keterangan:
Pastikan plugin tersebut hanya ada satu saja di template blog sobat, hal ini untuk menghindari over load blog. Jquery plugin mempunyai banyak versi hal tersebut ditunjukan dengan tulisan berwarna merah pada kode diatas 1.9.1.

Untuk Script Page Loading Blogger silahkan copy kode berikut dan letakan diatas kode </body> pada template blog sobat :

<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader"></div>');
// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(700).delay(3000).fadeOut(700);
});
//]]>
</script>

Penjelasan script diatas :
pada document body disisipkan kode <div id="page-loader"></div>

ketika akan berpindah ke halaman lain page loader ditampilkan dengan efek fadein dengan waktu 700detik, dilakukan penundaan 3000detik, dan kemudian diakhiri dengan efek fadeout 700detik.

Keterangan :
Waktu animasi ditunjukan pada tulisan berwarna merah dapat disesuaikan dengan kondisi blog. Ini biasanya menyesuaikan dengan size halaman yang di load.

Berikut kode CSS untuk Page Loading Blogger, Copy diatas kode </b:skin>

#page-loader{
position:fixed !important;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:Black url('URL IMAGE') no-repeat 50% 50%;
font:0/0;
text-shadow:none;
padding:1em 1.2em;
display:none;opacity:.7
}

Penjelasan kode CSS diatas :
Page loader berada pada posisi fix, dengan background Black/Hitam transparan 70%, hal ini ditunjukan dengan kode css position:fixed, background:Black dan opacity:.7

Keterangan :
Tulisan dengan warna merah dapat diganti menyesuaikan kondisi blog sobat. Ganti "URL IMAGE"
dengan url gambar yang kalian punya. URL gambar mempunyai akhiran ekstensi JPG, PNG, atau GIF.
contoh : http://www.devilzart.com/gambar.jpg , JPG adalah ekstensi atau format bahwa itu adalah url gambar.

Sekian tutorial kecil tentang membuat page loading dengan JQuery, semoga bermanfaat, Jika ada pertanyaan silahkan ajukan pada kotak komentar untuk dibahas bersama. Guru yang baik adalah pengalaman.

Tag : Belajar menjadi bloger keren