JavaScript Academy · Pelajaran

Pemuatan Gambar Malas

Muat gambar hanya saat gambar tersebut muncul.

Pemuatan Gambar Malas adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Gagasan Pemuatan Tertunda

Pemuatan tertunda menunda pengunduhan gambar hingga gambar tersebut hampir masuk ke area tampilan saat digulir. Hal ini menghemat bandwidth dan mempercepat pemuatan halaman awal, terutama untuk halaman panjang yang penuh gambar.

Menyimpan Alamat Asli

Triknya: jangan masukkan alamat gambar asli ke dalam src sejak awal. Simpan alamat tersebut dalam atribut data-src agar peramban belum mengunduhnya.

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

Memilih Gambar untuk Pemuatan Tertunda

Kumpulkan semua gambar yang memerlukan pemuatan tertunda. Konvensi yang umum adalah menggunakan kelas bersama atau keberadaan data-src.

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

Membuat Observer

Buat observer yang fungsi panggil baliknya memuat gambar asli setelah gambar tersebut beririsan. Gunakan rootMargin agar gambar mulai dimuat sedikit sebelum muncul.

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

Memuat Saat Beririsan

Saat gambar beririsan, salin data-src ke src. Peramban kemudian mengunduh dan menampilkannya.

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

Menghentikan Pengamatan Setelah Memuat

Setelah dimuat, gambar tidak perlu diawasi lagi. Panggil unobserve untuk membebaskan sumber daya dan mencegah pemicuan ulang.

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

Memulai Pengamatan

Ulangi setiap gambar yang dimuat secara tertunda dan mulai mengawasinya. Observer akan menangani sisanya saat pengguna menggulir.

lazyImages.forEach(img => observer.observe(img));

Menampilkan Gambar Pengganti

Berikan pengalaman yang mulus dengan menampilkan gambar pengganti kecil yang buram atau warna polos saat gambar asli dimuat, lalu tampilkan perlahan saat gambar menerima peristiwa load.

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

Atribut loading Bawaan

Peramban modern juga mendukung pemuatan tertunda bawaan melalui loading="lazy" pada img dan iframe. IntersectionObserver tetap berguna untuk kontrol khusus, animasi, atau perilaku cadangan.

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

Membersihkan Atribut Sumber Data

Setelah pemuatan selesai, Anda dapat menghapus atribut data-src agar DOM tetap rapi dan tidak menimbulkan kebingungan dalam kode atau kueri berikutnya.

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

Pola Lengkap

Pemuatan tertunda dengan IntersectionObserver adalah pola yang rapi dan efisien: simpan alamat dalam data-src, awasi setiap gambar, masukkan alamat asli saat terjadi perpotongan, lalu hentikan pengamatan. Hasilnya adalah halaman yang lebih cepat dan memuat gambar tepat saat diperlukan.

Pemeriksaan Singkat

Uji pemahaman Anda tentang pemuatan gambar secara tertunda.

Ringkasan

Anda telah membuat pemuatan gambar secara tertunda:

Simpan alamat asli dalam data-src.
Awasi setiap gambar dengan IntersectionObserver.
Saat terjadi perpotongan, salin data-src ke src dan panggil unobserve.
Gunakan rootMargin untuk memuat lebih awal, tepat sebelum gambar terlihat.
loading="lazy" bawaan adalah alternatif yang lebih sederhana.

Berikutnya, kita akan menerapkan pengguliran tanpa akhir.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemuatan Gambar Malas” gratis?

Ya — teks lengkap “Pemuatan Gambar Malas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pemuatan Gambar Malas”?

Muat gambar hanya saat gambar tersebut muncul. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Pemuatan Gambar Malas” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy