Pendahuluan
Anda dapat mengimplementasikan lazy loading dengan JavaScript secara efektif dalam proyek web Anda.
Apa itu Lazy Loading? Lazy loading adalah teknik yang memungkinkan pemuatan elemen halaman web hanya ketika dibutuhkan, mengoptimalkan waktu muat halaman dan pengalaman pengguna secara keseluruhan. Dalam tutorial ini, kita akan membahas konsep lazy loading dan cara mengimplementasikannya dengan JavaScript.
Manfaat Lazy Loading
Lazy loading adalah teknik yang menunda pemuatan elemen-elemen tertentu pada halaman web hingga saat diperlukan. Ini dapat mengurangi waktu muat halaman dan menghemat bandwidth.
Ada beberapa keuntungan menggunakan lazy loading, antara lain:
- Percepatan Muat Halaman: Dengan menunda pemuatan elemen yang tidak terlihat, ukuran halaman web akan menjadi lebih kecil, sehingga waktu yang dibutuhkan untuk memuat halaman tersebut akan lebih singkat.
- Meningkatkan pengalaman pengguna: Mengoptimalkan penggunaan bandwidth dengan memuat konten secara selektif dapat membuat pengguna tidak perlu menunggu semua elemen halaman web dimuat sebelum dapat melihat konten halaman tersebut.
- Meningkatkan performa SEO: Google telah mengindikasikan bahwa lazy loading dapat meningkatkan performa SEO halaman web.
Mengimplementasikan Lazy Loading
Ada dua cara utama untuk mengimplementasikan lazy loading dengan JavaScript:
- Menggunakan atribut loading
- Menggunakan library JavaScript
- Meningkatkan performa SEO: Google telah mengindikasikan bahwa lazy loading dapat meningkatkan performa SEO halaman web.
Menggunakan atribut loading
Pada browser modern, atribut loading dapat digunakan untuk mengontrol pemuatan gambar dengan menentukan kapan gambar tersebut harus dimuat. Atribut ini memiliki dua nilai yang dapat digunakan:
lazy: Nilai ini mengindikasikan bahwa gambar akan dimuat hanya ketika gambar tersebut mendekati viewport atau masuk ke dalam viewport pengguna. Ini membantu mengoptimalkan waktu muat halaman dan menghemat bandwidth dengan hanya memuat gambar yang diperlukan.Contoh penggunaan:
<img src="gambar.jpg" alt="Deskripsi Gambar" loading="lazy">
eager: Nilai ini mengindikasikan bahwa gambar harus dimuat segera ketika halaman dimuat, tanpa menunggu sampai gambar tersebut mendekati viewport. Ini berguna jika gambar tersebut sangat penting untuk konten awal halaman.Contoh penggunaan:
<img src="gambar.jpg" alt="Deskripsi Gambar" loading="eager">
Penggunaan atribut
loadingini membantu dalam mengelola waktu muat halaman dan meningkatkan pengalaman pengguna, terutama ketika halaman berisi banyak gambar.
Menggunakan library JavaScript
Ada banyak library JavaScript yang dapat digunakan untuk mengimplementasikan lazy loading, seperti Lazysizes Lozad.js IntersectionObserver. Berikut adalah contoh penggunaan Lozad.js:
Contoh penggunaan:
<!-- HTML -->
<script src="https://cdn.jsdelivr.net/npm/lozad@1.14.0/dist/lozad.min.js"></script>
<img class="lozad" data-src="gambar1.jpg" alt="Deskripsi Gambar 1">
<img class="lozad" data-src="gambar2.jpg" alt="Deskripsi Gambar 2">
<img class="lozad" data-src="gambar3.jpg" alt="Deskripsi Gambar 3">
<script>
// JavaScript
document.addEventListener("DOMContentLoaded", function() {
const observer = lozad(); // inisialisasi Lozad
observer.observe();
});
</script>
Pastikan Anda menggantikan URL gambar dan memasukkan versi terbaru dari Lozad.js jika diperlukan. Dalam contoh ini, gambar-gambar dengan class "lozad" akan dimuat secara malas menggunakan Lozad.js.
Anda dapat menyesuaikan kodenya sesuai kebutuhan proyek Anda dan juga mengeksplorasi dokumentasi resmi dari library atau API yang digunakan untuk mendapatkan lebih banyak informasi dan opsi konfigurasi.
Contoh Implementasi Lazy Loading
<body>
<h1>Contoh Lazy Loading</h1>
<img src="image1.jpg" loading="lazy">
<img src="image2.jpg" loading="lazy">
<img src="image3.jpg" loading="lazy">
<script>
window.onload = function () {
// Cari semua elemen gambar dengan atribut loading="lazy"
var lazyImages = document.querySelectorAll("img[loading='lazy']");
// Set ukuran gambar menjadi 0
for (var i = 0; i < lazyImages.length; i++) {
lazyImages[i].style.width = 0;
}
// Atur event listener untuk memuat gambar saat di-scroll
window.addEventListener("scroll", function () {
for (var i = 0; i < lazyImages.length; i++) {
// Jika gambar terlihat di viewport, muat gambar tersebut
if (lazyImages[i].getBoundingClientRect().top < window.innerHeight) {
lazyImages[i].src = lazyImages[i].getAttribute("src");
lazyImages[i].style.width = "100%";
}
}
});
};
</script>
</body>
Kode tersebut akan memuat gambar hanya jika gambar tersebut terlihat di viewport pengguna. Untuk melakukannya, kode tersebut pertama-tama akan mencari semua elemen gambar dengan atribut loading="lazy". Kemudian, kode tersebut akan mengatur ukuran gambar menjadi 0. Selanjutnya, kode tersebut akan mengatur event listener untuk memuat gambar. Event listener tersebut akan memuat gambar jika gambar tersebut terlihat di viewport pengguna.
Orang lain juga bertanya (FAQ)
bagaimana cara membuat teks berjalan (marquee) untuk pemula?
Bagi Anda yang baru pertama kali mempelajarinya dan masih bingung, Anda dapat mempelajarinya tentang panduan lengkap membuat teks berjalan untuk pemula.
Apa kelebihan dan kekurangan teks berjalan (marquee)?
berikut adalah pembahasan yang perlu Anda ketahui tentang kelebihan dan kekurangan teks berjalan (marquee).
Bagaimana cara mengatur arah gerakan teks berjalan (marquee)?
Mengatur arah gerakan teks pada Running Text atau teks berjalan adalah dengan menggunakan atribut direction dengan nilai left, right, up atau down. Pelajari selengkapnya tentang cara mengatur arah gerakan teks berjalan.
Bagaimana cara mengatur perilaku gerakan teks, seperti: bergerak sekali lalu berhenti, berputar atau bolak-balik?
Mengatur perilaku gerakan teks, seperti: bergerak sekali lalu berhenti, berputar atau bolak-balik adalah dengan menggunakan atribut behavior dengan nilai scroll, slide atau alternate. Pelajari selengkapnya tentang cara mengatur perilaku gerakan teks [bergerak sekali lalu berhenti, berputar atau bolak-balik].
Bagaimana cara mengatur posisi teks marquee?
Cara mengatur posisi teks marquee adalah dengan menggunakan atribut align dengan nilai left, right, center atau justify. Pelajari selengkapnya tentang cara mengatur posisi teks marquee.
Bagaimana cara memberi warna tulisan Running text/Marquee/teks berjalan?
Cara memberi warna tulisan Running text adalah dengan menggunakan atribut bgcolor dengan memberi nilai Nama warna* atau kode warna*. Pelajari selengkapnya tentang cara memberi warna tulisan Running text/Marquee/teks berjalan.
Bagaimana cara mengatur kecepatan gerakan Running text/Marquee/teks berjalan?
Cara mengatur kecepatan gerakan marquee, semakin besar angka maka semakin cepat gerakannya adalah dengan menggunakan atribut scrollamount dengan memberi nilai angka*, namun untuk mengatur waktu jeda/memperlambatnya, gunakan scrolldelay. Pelajari selengkapnya tentang cara mengatur kecepatan gerakan marquee dengan scrollamount, bandingkan dengan cara mengatur jeda gerakan marquee dengan scrolldelay.
Bagaimana cara mengatur waktu delay (tunda) gerakan per langkah teks berjalan?
Cara mengatur waktu delay (tunda) gerakan per langkah teks berjalan adalah dengan menggunakan atribut scrolldelay dengan memberi nilai angka*. Pelajari selengkapnya tentang cara mengatur waktu delay (tunda) gerakan per langkah teks berjalan dengan CSS atau mengatur waktu tunda animasi marquee dengan JavaScript onstart attribute.
Bagaimana cara mengatur jumlah pengulangan teks berjalan?
Cara mengatur jumlah pengulangan teks berjalan adalah dengan menggunakan atribut loop dengan memberi nilai angka* atau infinite. Pelajari selengkapnya tentang cara mengatur jumlah pengulangan teks berjalan.
Bagaimana cara mengatur lebar blok teks marquee dalam pixel atau persen?
Cara mengatur lebar blok teks marquee dalam pixel atau persen adalah dengan menggunakan atribut width dengan memberi nilai px atau %. Pelajari selengkapnya tentang cara mengatur lebar blok teks marquee dalam pixel atau persen.
Bagaimana cara mengatur tinggi blok teks marquee dalam pixel atau persen?
Cara mengatur tinggi blok teks marquee dalam pixel atau persen adalah dengan menggunakan atribut height dengan memberi nilai px atau %. Pelajari selengkapnya tentang cara mengatur tinggi blok teks marquee dalam pixel atau persen.
Bagaimana cara menampilkan pesan yang akan muncul saat mouse berada di atas teks marquee?
Cara memberikan pesan yang akan muncul saat mouse berada di atas teks marquee adalah dengan menggunakan atribut title dengan nilai teks pesan*. Pelajari selengkapnya tentang cara menampilkan pesan yang akan muncul saat mouse berada di atas teks marquee.
Bagaimana cara menghentikan teks marquee saat disorot mouse?
Cara menghentikan teks marquee saat disorot mouse adalah dengan menggunakan atribut onmouseover dengan nilai this.stop(). Pelajari selengkapnya tentang cara menghentikan teks marquee saat disorot mouse.
Bagaimana cara menjalankan teks marquee ketika mouse menjauh?
Cara menjalankan teks marquee ketika mouse menjauh adalah dengan menggunakan atribut onmouseout dengan nilai this.start(). Pelajari selengkapnya tentang cara menjalankan teks marquee ketika mouse menjauh.
Bagaimana cara mengatur jarak kiri dan kanan teks marquee?
Cara mengatur jarak kiri dan kanan teks marquee adalah dengan menggunakan atribut hspace dengan nilai px. Pelajari selengkapnya tentang cara mengatur jarak kiri dan kanan teks marquee.
Bagaimana cara mengatur jarak atas dan bawah teks marquee?
Cara mengatur jarak atas dan bawah teks marquee adalah dengan menggunakan atribut vspace dengan nilai px. Pelajari selengkapnya tentang cara mengatur jarak atas dan bawah teks marquee.
Bagaimana cara membuat teks berjalan dengan efek warna?
Cara membuat teks berjalan dengan efek warna adalah dengan menggunakan atribut style dengan nilai "color: red*Blue*Yellow*;". Pelajari selengkapnya tentang cara membuat teks berjalan dengan efek warna.
Jadi, Pertanyaan-pertanyaan dan jawaban atribut di atas dapat Anda padukan dengan tag <marquee> sesuai kreasi masing-masing.