Mengatur Waktu Jeda pada Preloader Gif Loading Website

Cara mengatur waktu jeda pada preloader gif loading website.
Jundi Alfaruqi

Ketika preloader selesai dimuat seharusnya halaman web juga sudah selesai di load. Jika tidak, maka rasanya percuma saja memasang preloader.

Jika preloader terlalu cepat selesai dan halaman web ternyata belum selesai loading, kita dapat mangakalinya dengan cara memberikan delay atau waktu jeda pada preloader.

Kita bisa mengatur jeda sesuai keinginan kita,

… 5 detik, 6 detik atau 7detik. Biasanya diatur sesuai atau dilebihkan sedikit dari lama waktu rata-rata yang dibutuhkan web untuk me-load seluruh isi pada halaman web tersebut.

Cara melihat kecepatan loading web bisa cek di google page speed insight.

Jadi,

… Misalkan kecepatan loading web itu 5 detik, maka kita set preloadernya 6 detik.

Membuat Delay pada Preloader Gif

Letakkan kode untuk memanggil file jquery di bawah ini tepat di bawah kode <head> :

<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>

Script Preloader:

<!--CSS Preloader GIF-->
<style type="text/css">
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
}
.preloader .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font: 14px arial;
}
</style>

<!--Javascript Preloader with Delay Option-->
<script>
$(document).ready(function(){
$(".preloader").delay(5000).fadeOut();
})
</script>

<br />
<div class="preloader">
<div class="loading">
<img src="https://cdn-images-1.medium.com/max/800/0*EWRe6WPyccnxVeY3.gif" width="80" />
    <br />
Harap Tunggu<br />
  </div>
</div>
</div>

Script yang ditandai di atas adalah script untuk mengatur jeda waktu, satuannya adalah milliseconds (Milidetik). delay(5000) artinya preloder akan berjalan selama 5000 milliseconds atau 5 detik.

Cek DEMO

Tags
Komentar
Untuk menambahkan gambar:
[image] image_url [/image]

Untuk menambahkan blok kode:
[code] your_code [/code]

Untuk menambahkan kutipan:
[quote] your_quote [/quote]

Untuk menambahkan tautan:
[link] your_link_text | link_url [/link]