IntersectionObserver ile Tembel Yükleme
Görsel ve içerik yüklemesini görünür alana girene kadar erteleyin
IntersectionObserver ile Tembel Yükleme, CoddyKit'te ücretsiz bir HTML 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, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Yerel loading="lazy" Ötesi
Yerel tembel yükleme, <img> ve <iframe> ögelerini kapsar. Diğer her şey — arka plan görselleri, videolar, maliyetli bileşenler ve üçüncü taraf araçları — için çalışmayı öge görünüm alanına yaklaşana kadar ertelemek üzere IntersectionObserver doğru araçtır.
Kalıp
Ertelenen ögeleri gerçek kaynağı içeren bir veri özniteliğiyle işaretleyiniz; küçük bir yer tutucu oluşturunuz. Her birini gözlemleyiniz; kesiştiğinde veri kaynağını gerçek kaynağa dönüştürünüz (veya ögeyi başka bir şekilde etkinleştiriniz) ve geri çağırma işlevinin bir daha çalışmaması için unobserve kullanınız.
<img class="lazy" data-src="/photo.jpg" alt="Photo" width="800" height="600">
<script>
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
}
}, { rootMargin: "200px" });
document.querySelectorAll(".lazy").forEach((img) => observer.observe(img));
</script>Tembel Arka Plan Görselleri
CSS background-image yerel olarak tembel yüklenemez. Kesişim gerçekleştiğinde el.style.backgroundImage = `url("${el.dataset.bg}")` ayarlayınız veya arka plan görselini tanımlayan bir CSS sınıfı ekleyiniz. Görsel o anda indirilmeye başlar.
Tembel Video
Ekranın alt kısmındaki videolar için başlangıçta kaynak ve source ögelerini eklemeyiniz. Kesişim gerçekleştiğinde <source> etiketlerini ekleyiniz ve video.load() çağırınız. Aksi hâlde video meta verileri, kullanıcı ögeye yaklaşacak kadar bile kaydırmadan önce hevesle indirilebilir.
Üçüncü Taraf Araçları
Sosyal medya gömüleri, yorum araçları ve sohbet betikleri megabaytlarca veri yükler. Kesişim gerçekleştiğinde aracın kurulum betiğini dinamik olarak içe aktarınız: await import("/embed.js"). Maliyet yalnızca kullanıcı gerçekten bölüme kaydırdığında ödenir.
Tembel Iframe (loading="lazy" Ötesi)
Yerel iframe tembel yüklemesi iframe belgesini yine de indirir. Ağır gömüler (haritalar ve video oynatıcılar) için bir "cephe" kalıbı kullanınız: bir yer tutucu görsel gösteriniz; tıklama veya kesişim gerçekleştiğinde bunu gerçek iframe ile değiştiriniz. Bu, başlangıçtaki sayfa boyutunu büyük ölçüde azaltır.
Önceden Yükleme İçin rootMargin
rootMargin: "200px", öge görünüm alanına girmeden 200 piksel önce yüklemeyi başlatır. Bunu kaydırma hızına göre ayarlayınız: çok küçük olursa hızlı kaydırmalarda kullanıcılar yer tutucuları görür; çok büyük olursa her şeyi yükleyerek tembel yüklemenin amacını ortadan kaldırırsınız.
Tetiklemeden Sonra Unobserve Kullanma
Tembel yükleme etkinleştikten sonra her zaman observer.unobserve(element) çağırınız. Aksi hâlde öge görünüm alanına her yeniden girdiğinde geri çağırma işlevi çalışmaya devam eder — bu, boşa CPU kullanımı yaratır ve etkinleştirme aynı işlemi güvenle tekrarlayamıyorsa hatalara yol açabilir.
Alan Ayırma
Tembel yüklenen görsellerde genişlik ve yükseklik, tembel kapsayıcılarda ise minimum yükseklik ayarlayınız. Açık boyutlar olmadan içerik yüklendikçe sayfa yeniden düzenlenir — bu durum rahatsız edici kaydırma sıçramalarına ve kötü bir Kümülatif Düzen Kayması puanına yol açar.
JS Olmadan Geri Dönüş
Tam Aşamalı Geliştirme için tembel ögeyi gerçek kaynakla birlikte <noscript> içine alınız: <noscript><img src="/photo.jpg"></noscript>. JS kullanmayan kullanıcılar görseli hemen alır; JS kullananlar tembel sürümü alır. Bunu uygun veri-kaynak işaretlemesiyle birlikte kullanınız.
Çok Sayıda Ögeyi Toplu İşleme
Tek bir gözlemci örneği yüzlerce ögeyi verimli bir şekilde izleyebilir. Her öge için bir gözlemci oluşturmayınız. İstenen seçeneklere sahip tek bir paylaşılan gözlemci oluşturunuz ve her hedefi kaydetmek için observe() kullanınız.
Yerel loading="lazy" ile Birleştirme
Özellikle <img> için birincil mekanizma olarak loading="lazy" kullanınız ve IntersectionObserver'ı yerel tembel yüklemenin kapsamadığı durumlara ayırınız. İkisi sorunsuz biçimde birlikte çalışır: yerel mekanizma ekranın altındaki görselleri, IntersectionObserver ise arka planları, bileşenleri ve diğer özel yükleyicileri yönetir.
Bilgi Kontrolü
Tembel yüklenen bir öge etkinleştirildikten sonra observer.unobserve(element) çağırmak neden önemlidir?
Özet
IntersectionObserver, tembel yüklemeyi yerel <img loading="lazy"> yaklaşımının ötesine taşıyarak arka planları, videoları, üçüncü taraf araçlarını ve dinamik bileşen içe aktarmalarını kapsar. data-src yer tutucuları kullanınız, kesişimde kaynağı değiştiriniz ve etkinleştirmeden sonra unobserve kullanınız. rootMargin ile önceden yükleyiniz, width/height ile alan ayırınız, noscript geri dönüşü sağlayınız ve uygulanabildiği yerlerde yerel tembel yüklemeyle birleştiriniz.
Sıkça Sorulan Sorular
“IntersectionObserver ile Tembel Yükleme” dersi ücretsiz mi?
Evet — “IntersectionObserver ile 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 HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“IntersectionObserver ile Tembel Yükleme” dersinde ne öğreneceğim?
Görsel ve içerik yüklemesini görünür alana girene kadar erteleyin HTML 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.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML 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.
“IntersectionObserver ile 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 HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML 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
- IntersectionObserver API ve Eşikler
- IntersectionObserver ile Tembel Yükleme
- Sonsuz Kaydırma Uygulaması
- Kaydırmayla Bağlantılı Animasyonları Ayarlama