JavaScript Academy · Ders

Görüntüleri Tembel Yükleme

Görüntüleri yalnızca göründüklerinde yükleyin.

Görüntüleri Tembel Yükleme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Gecikmeli Yükleme Fikri

Gecikmeli yükleme, görsellerin kaydırılarak görünür hâle gelmek üzere oldukları ana kadar indirilmesini erteler. Bu yöntem, özellikle uzun ve çok sayıda görsel içeren sayfalarda bant genişliğinden tasarruf sağlar ve ilk page yüklemesini hızlandırır.

Gerçek Adresi Saklama

İşin püf noktası şudur: başlangıçta gerçek görsel adresini src içine koymayın. Tarayıcının görseli henüz indirmemesi için adresi data-src özniteliğinde saklayın.

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

Gecikmeli Yüklenecek Görselleri Seçme

Gecikmeli yüklenmesi gereken tüm görselleri toplayın. Yaygın bir yaklaşım, ortak bir sınıf kullanmak veya data-src özniteliğinin bulunmasını temel almaktır.

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

Observer Oluşturma

Kesiştiğinde gerçek görseli yükleyen bir observer oluşturun. Görsel görünmeden biraz önce yüklenmeye başlaması için rootMargin kullanın.

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

Kesişimde Yükleme

Bir görsel kesiştiğinde, data-src değerini src içine kopyalayın. Ardından tarayıcı görseli indirip görüntüler.

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' });

Yüklemeden Sonra Unobserve

Yüklendikten sonra bir görselin yeniden izlenmesi gerekmez. Kaynakları serbest bırakmak ve yeniden tetiklenmesini önlemek için unobserve çağrısını yapın.

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

Gözlemi Başlatma

Her gecikmeli görselin üzerinde döngü kurup onu izlemeye başlayın. Kullanıcı kaydırdıkça geri kalanını observer halleder.

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

Yer Tutucu Gösterme

Gerçek görsel yüklenirken küçük, bulanık bir yer tutucu veya düz bir renk göstererek akıcı bir deneyim sunun; ardından görselin load olayı gerçekleştiğinde yer tutucuyu yavaşça görünmez yapın.

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

Yerel loading Özniteliği

Modern tarayıcılar ayrıca img ve iframe üzerinde loading="lazy" kullanılarak yerel gecikmeli yüklemeyi destekler. IntersectionObserver, özel denetim, animasyonlar veya yedek davranış için hâlâ yararlıdır.

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

// Observer approach gives more control and effects.

data-src Temizleme

Yüklemeden sonra, DOM'u düzenli tutmak ve sonraki kod veya sorgulamalarda karışıklığı önlemek için data-src özniteliğini kaldırabilirsiniz.

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

Tam Uygulama Şablonu

IntersectionObserver ile gecikmeli yükleme düzenli ve verimli bir şablondur: adresleri data-src içinde saklayın, her görseli izleyin, kesiştiğinde gerçek adresi aktarın ve ardından izlemeyi bırakın. Sonuç, görselleri tam zamanında yükleyen daha hızlı bir page'dir.

Hızlı Kontrol

Görsellerin gecikmeli yüklenmesini ne kadar anladığınızı ölçün.

Özet

Görseller için gecikmeli yüklemeyi oluşturdunuz:

Gerçek adresi data-src içinde saklayın.
Her görseli bir IntersectionObserver ile izleyin.
Kesiştiğinde data-src değerini src içine kopyalayın ve unobserve çağrısını yapın.
Görünmeden hemen önce ön yükleme yapmak için rootMargin kullanın.
Yerel loading="lazy" daha basit bir alternatiftir.

Sırada sonsuz kaydırmayı uygulayacağız.

Sıkça Sorulan Sorular

“Görüntüleri Tembel Yükleme” dersi ücretsiz mi?

Evet — “Görüntüleri Tembel Yükleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Görüntüleri Tembel Yükleme” dersinde ne öğreneceğim?

Görüntüleri yalnızca göründüklerinde yükleyin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Görüntüleri Tembel Yükleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön