Mengoptimalkan Kinerja Situs dengan Lazy Loading Menggunakan jQuery dan PHP
Lazy loading adalah teknik untuk meningkatkan kinerja situs dengan menunda pemuatan gambar atau konten lainnya sampai benar-benar diperlukan. Teknik ini sangat efektif untuk situs dengan banyak gambar atau konten besar, karena dapat mengurangi waktu pemuatan halaman dan penggunaan bandwidth. Dalam tutorial ini, kita akan membuat lazy loading untuk gambar menggunakan jQuery dan PHP.
Langkah 1: Persiapan Database dan Gambar
Kita akan menyimpan informasi gambar dalam database. Berikut adalah contoh untuk membuat database dan tabelnya:
CREATE DATABASE tutorial_lazy_load; USE tutorial_lazy_load; CREATE TABLE gambar ( id INT AUTO_INCREMENT PRIMARY KEY, nama_file VARCHAR(255) NOT NULL, deskripsi VARCHAR(255) );
Setelah tabel siap, masukkan beberapa data sampel yang berisi nama file gambar dan deskripsi:
INSERT INTO gambar (nama_file, deskripsi) VALUES
('gambar1.jpg', 'Deskripsi gambar 1'),
('gambar2.jpg', 'Deskripsi gambar 2'),
('gambar3.jpg', 'Deskripsi gambar 3');
Pastikan untuk menyimpan file gambar di dalam folder yang bisa diakses, misalnya di folder images.
Langkah 2: Membuat Tampilan HTML dengan Placeholder Gambar
Kita akan membuat halaman HTML yang menampilkan placeholder gambar. Gambar akan dimuat hanya ketika pengguna menggulir ke bagian gambar tersebut.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Gambar dengan jQuery dan PHP</title>
<style>
/* Styling sederhana untuk gambar */
.gambar-lazy {
display: block;
width: 100%;
max-width: 300px;
height: auto;
margin: 20px auto;
background: #f0f0f0;
}
</style>
</head>
<body>
<h1>Lazy Loading Gambar</h1>
<div id="galeri">
<!-- Konten gambar akan dimuat di sini -->
</div>
<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="lazyload.js"></script>
</body>
</html>
Dalam contoh di atas, elemen <div id="galeri"> akan menjadi tempat untuk menampilkan gambar. Gambar akan di-load menggunakan jQuery saat pengguna menggulir ke bawah.
Langkah 3: Membuat File PHP untuk Mengambil Data Gambar
Kita buat file gambar.php yang mengambil data gambar dari database dan mengembalikannya dalam format HTML.
<?php
// Koneksi ke database
$conn = new mysqli("localhost", "root", "", "tutorial_lazy_load");
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
// Mengambil daftar gambar dari database
$result = $conn->query("SELECT * FROM gambar");
$gambarData = [];
while ($row = $result->fetch_assoc()) {
$gambarData[] = $row;
}
$conn->close();
// Mengembalikan data dalam bentuk JSON
echo json_encode($gambarData);
?>
File gambar.php ini akan menghasilkan data dalam format JSON, yang akan digunakan oleh jQuery untuk memuat gambar.
Langkah 4: Membuat Lazy Loading dengan jQuery
Tambahkan file lazyload.js untuk mengimplementasikan fitur lazy loading menggunakan jQuery. File ini akan mengambil data gambar dari gambar.php dan menampilkan gambar ketika pengguna menggulir ke bagian gambar.
$(document).ready(function() {
// Memuat gambar dari database
$.getJSON("gambar.php", function(data) {
$.each(data, function(i, gambar) {
// Menambahkan gambar dengan atribut data-src
$("#galeri").append(
`<img class="gambar-lazy" data-src="images/${gambar.nama_file}" alt="${gambar.deskripsi}">`
);
});
lazyLoad();
});
// Fungsi lazy load untuk memuat gambar saat diperlukan
function lazyLoad() {
$(window).on("scroll", function() {
$(".gambar-lazy").each(function() {
if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
$(this).attr("src", $(this).attr("data-src"));
$(this).removeClass("gambar-lazy");
}
});
});
}
});
Pada lazyload.js:
- Kita mengambil data gambar dari
gambar.phpdan menambahkan gambar ke<div id="galeri">dengan atributdata-src. - Fungsi
lazyLoadmengecek posisi gambar. Jika gambar berada dalam jangkauan tampilan, atributsrcdiisi dengan nilaidata-srcsehingga gambar akan dimuat.
Langkah 5: Menguji dan Menjalankan Aplikasi
Buka halaman HTML ini di browser dan gulir ke bawah untuk melihat lazy loading bekerja. Gambar akan dimuat secara bertahap sesuai dengan posisi scroll pengguna.
Kesimpulan
Dengan PHP, MySQL, dan jQuery, kita bisa membuat lazy loading yang efektif untuk meningkatkan kinerja situs, terutama pada halaman dengan banyak gambar. Teknik ini sangat bermanfaat untuk mempercepat pemuatan halaman dan mengurangi konsumsi bandwidth.
