Mecha versi 2.6.4 sudah dirilis!

Membuat Animasi Loading dengan jQuery · Bagian 2

Tabel Konten
  1. HTML 
  2. CSS 
  • Pahami Resiko 
    • Loading Page

    Efek loading/pemuatan halaman yang satu ini bukan dipicu berdasarkan aksi klik pada tautan internal seperti pada artikel sebelumnya, namun dipicu berdasarkan selesainya pemuatan halaman:

    Lihat Demo

    Kuncinya sangat sederhana. Dengan menggunakan potongan kode ini, Saya akan menjalankan fungsi .fadeOut() pada overlay/tabir hanya pada saat halaman telah selesai dimuat:

    $(window).bind("load", function() {
    ...
});

    Pekerjaan berikutnya hanya tinggal menciptakan tabir dengan elemen <div>, kemudian atur agar lebar dan tingginya cukup untuk menutupi seluruh jendela. Letak yang ideal adalah di bawah <body>:

    HTML 

    <div id='loading-overlay'>Loading...</div>

    CSS 

    #loading-overlay {
  width:100%;
  height:100%;
  position:fixed !important;
  position:absolute; /* IE6 Fallback */
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:999999;
  background:#3A3A3A url('http://lh5.googleusercontent.com/-NiAL93I5vds/U7kChKEbEAI/AAAAAAAAImw/3972BVpfhbw/s1600/layer-loading.gif') no-repeat 50% 50%;
  font:normal normal 0/0 a;
  color:transparent;
  text-shadow:none;
}

    Kemudian bangun fungsi jQuery yang akan menghilangkan tabir hanya jika keseluruhan halaman telah selesai dimuat:

    // hilangkan overlay dengan efek .fadeOut() jika keseluruhan halaman telah selesai dimuat
$(window).bind("load", function() {
    $('#loading-overlay').fadeOut();
});

    Pahami Resiko 

    Resiko saat menerapkan efek ini adalah, jika script gagal terakses, tabir tidak akan bisa menghilang dan akan terus menutupi seluruh halaman Anda. Tapi itu bisa diatasi dengan cara menyisipkan kode CSS yang menyatakan bahwa tabir akan disembunyikan jika JavaScript dinonaktifkan. Caranya adalah dengan menggunakan tag <noscript> seperti ini:

    <noscript>
<style>
#loading-overlay {display:none}
</style>
</noscript>

    Letakkan kode tersebut di atas </head>

    26 Komentar

    ricco

    mantap kawand tutorial2nya..
    keep sharing..
    dan ane tinggal mantau aja.. :)

    Unknown

    naruh kodenya gimana mas taufikkkk...???? X@ X@ X@

    Contoh resikonya gimana mas taufik,,, mohon di jelaskan :D :D :D

    Taufik Nurrohman

    @trii waluyo Coba nonaktifkan JavaScript di peramban yang kamu pakai:

    Lalu muat ulang halaman demonya sekali lagi :drummer:

    Unknown

    @Taufik Nurrohman Q dah jadi si mas,, tapi loadingnya lama banget...
    Mungkin gara-gara widget tertentu yang belum berhasil selesai dimuat jadi loadingnyA belum selesai... :(

    Hmm,,,
    Q kepenginnya loading ini supaya tidak halaman selesai dimuat mas ???
    Paling loadingnya cuma beberapa detik aja ???
    Q mau ngutak ngutik kode jQuerynya ga bisa mas ??? :'(

    Mohon pencerahannya

    Unknown

    @Taufik Nurrohman Q dah coba tetep ga bisa,, nunguin 5 detk malah ga ilang ilang tuh gambar...
    Mungkin karena template aku si...

    Lagian kalau dpasang ini,, slider aku pada hompage tetep aja ga ketutup, malah loadingnya yang ketutup sama slidernya

    Gambar diatas loading yang sudah di terapkan diblog aku mas,, aku dah nungguin 5 detik malah ga ilang-ilang tu gambarnya...
    Screenshot itu pun kalau q dah gulir kebawah,, kalau belum malah ketutup slidernya...

    Q dah naruh jQuery sama HTMLnya,, jadi kaya gini

    setTimeout(function() {
$('#loading-overlay').fadeOut();
}, 5000);
</head>
<div id='loading-overlay'>Loading...</div>
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<div id='header-wrapper'>

    nyari kode <body> ga ada mas,,
    adanya

    <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Mob3se7en™ (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<data:description/>
</b:includable>
<b:includable id='main'>

    :)

    Taufik Nurrohman

    @trii waluyo Itu sama saja, sama-sama tag <body>
    Jangan lupa kodenya diletakkan di dalam $(function() {}) dan di dalam tag <script>:

    <script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#loading-overlay').fadeOut();
}, 5000);
});
//]]>
</script>

    Unknown

    @Taufik Nurrohman Alhamdulialh mas taufik,, akhhirnya jadi juga... ;) \m/

    Oh ya mas,, aku punya ide nie mas,, kira-kira loading ini bisa ga ya supya jangan tampil pada saat membuka halaman hompage ??? Q penginnya loading ini ga usah tampil pada saat hompage... Cuma pada artikel saja,

    Soalnya kalau loading pada saat homepage aku tuh gambar loadingya ketutup efek slider trus menu fly out CSS3nya juga ga ketutup...

    Gimana ya mas,,, ??? :-bd

    Mohon pencerahannya :)

    Taufik Nurrohman

    @trii waluyo Oya, maaf. Itu Salah Saya. Saya lupa menuliskan z-index di sini:

    #loading-overlay {
width:100%;
height:100%;
position:fixed !important;
position:absolute; /* IE6 Fallback */
top:0px;
right:0px;
bottom:0px;
left:0px;
z-index:999999;
background:#3A3A3A url(http://3.bp.blogspot.com/-_ONDmjNBMJs/TwPCL3AdlII/AAAAAAAAB4c/02MboPkAHGg/s1600/layer_loading.gif) no-repeat center;
color:transparent !important;
text-indent:-99999px;
}

    Sekarang seharusnya semua elemen akan tertutup tabir.

    Unknown

    @Taufik Nurrohman Berhasil mas,, tapi fly out cssnya ga ketutup...
    Paling perbedaan kalau sudah dikasih z-index:999999; Read morenya ketutup sama back to top...
    fly out cssnya ga ketutup mas,, :(

    Apa emang dari sananya ya mas,, ???

    Unknown

    @Taufik Nurrohman Oh ya mas,,,
    z-index:999999; apa si mas ???
    Penjelesannya apa mas taufik,, ???
    Q pengin tahu lebih dalam tentang z-index:999999; :-bd

    Di Fly Out CSS3 juga ada kode z-index:999999; nya ...

    Surga Kenari

    z-index itu semacam tiban meniban...

    jadi semakin besar angka nya

    semakin dia di atas / di luar tampilannya

    kalo angkanya di perkecil, dia semakin di dalem / di bawah

    Surga Kenari

    mas Taufik Nurrohman, punya saya kok yg nampil background nya dulu setelah itu baru gambar loadingnya?

    Taufik Nurrohman

    Latar lebih cepat terlihat dibandingkan gambar. Semakin besar gambar, semakin lama terlihat.

    Surga Kenari

    oh gtu ya mas,

    mas Taufik blognya sangat ringan sekali saya rasakan..

    mas coba bisa review blog saya sdkit? blog saya sudah ringan atau masih terlalu berat?

    ada tips buat saya supaya lebih ringan sprti blog mas Taufik ?

    Taufik Nurrohman

    Hmh... Mungkin karena Saya jarang mampir jadi terasa agak lambat. Blog Saya rasanya cepat & ringan soalnya sering dikunjungi, jadi cache-nya sering tersimpan di peramban pengunjung. Yang penting ketahui semua bagian/widget yang memakan waktu, pelajari durasinya, tentukan prioritasnya :W

    Unknown

    mas..berarti loader ini, sm kyk punya urang karai ya mas [http://urang-kurai.blogspot.com/]

    Unknown

    Loadingnya ga Ketutp mas

    Taufik Nurrohman

    Coba set margin menjadi nol:

    #loading-overlay {
margin:0 0;
}

    Unknown

    nah mas taufik, gimana kalo seandainya hanya ditampilkan saat pengunjung pertama kali membuka blog kita saja, tapi loading gak akan ditampilkan lagi jika pengunjung tersebut pindah halaman ^_^

    Taufik Nurrohman

    Pakai Cookies:

    if (readCookie('first-visit')) {
$('#loading-overlay').remove();
} else {
createCookie('first-visit', null, 1); // satu hari
}

    EM

    nah untuk membuat efek loading seperti pada blog ini caranya bagaimana mas?
    apa blog ini juga memakai script tersebut di atas?

    Yoshiewafa

    Bagus mas tutorialnya :D, boleh dicoba nih.

    Komentar telah ditutup.