Preload adalah teknik yang digunakan untuk memuat konten, gambar, atau elemen-elemen lain pada situs web sebelum tampilan halaman web utama. Ini dapat meningkatkan pengalaman pengguna dengan mengurangi waktu tunggu. Dalam artikel ini, kita akan membahas cara membuat preload menggunakan jQuery, serta memberikan contoh kode yang dapat Anda gunakan.
Cara Membuat Preload (Halaman Loading) Menggunakan jQuery Beserta Contohnya :
1. Persiapan:
Sebelum kita memulai, pastikan Anda telah menyertakan jQuery dalam proyek web Anda. Anda dapat mengunduh jQuery dari situs web resmi jQuery (https://jquery.com/download/) atau menggunakan CDN (Content Delivery Network) untuk memuatnya.
2. Membuat HTML Dasar:
Berikut adalah contoh elemen HTML dasar yang diperlukan untuk membuat preload:
html :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Preload Menggunakan jQuery</title>
</head>
<body>
<!– Konten yang akan dimuat –>
</body>
</html>
Anda dapat menambahkan elemen gambar, teks, atau elemen lain yang ingin Anda muat sebelum tampilan halaman web.
3. Membuat Preload Menggunakan jQuery:
Berikut adalah contoh kode jQuery untuk membuat preload:
html :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Preload Menggunakan jQuery</title>
<style>
/* Gaya CSS untuk tampilan preload */
#preload {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<!– Preload –>
<div id=”preload”>
<p>Loading…</p>
</div>
<!– Konten yang akan dimuat –>
<!– Gantilah dengan elemen-elemen yang ingin Anda muat –>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script>
$(document).ready(function() {
// Sembunyikan preload saat halaman web selesai dimuat
$(window).on(‘load’, function() {
$(‘#preload’).fadeOut(‘slow’, function() {
$(this).remove();
});
});
});
</script>
</body>
</html>
Dalam contoh di atas, kita menggunakan sebuah div dengan ID “preload” untuk menampilkan pesan “Loading…” selama halaman web dimuat. Saat halaman selesai dimuat, preload akan memudar dan kemudian dihapus dari DOM.
Kesimpulan:
Membuat preload menggunakan jQuery adalah cara yang efektif untuk meningkatkan pengalaman pengguna dengan mengurangi waktu tunggu saat halaman web dimuat. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah membuat preload untuk situs web Anda dan memuat konten sebelum tampilan halaman web utama. Teknik ini akan memberikan kesan yang lebih responsif dan mulus kepada pengguna situs web Anda.