Bunu çok sayıda "modern" web sitesinde (ör. Facebook ve google görsel arama) fark ettim, burada katlamanın altındaki görseller yalnızca kullanıcı onları görünür görüntü alanı bölgesine getirmek için yeterince aşağı kaydırdığında ( görüntü kaynağına göre, sayfa şunu gösterir) X sayıda <img>etiket, ancak sunucudan hemen alınmazlar ). Bu tekniğin adı nedir, nasıl çalışır ve kaç tarayıcıda çalışır? Ve bu davranışı minimum kodlama ile gerçekleştirebilecek bir jQuery eklentisi var mı?

Düzenle

Bonus: HTML öğeleri için "onScrolledIntoView" veya benzer bir olay olup olmadığını birisi açıklayabilir. Değilse, bu eklentiler nasıl çalışır?

Buradaki cevaplardan bazıları sonsuz sayfa içindir. Salman'ın sorduğu şey tembelce resim yüklemesi.

Eklenti

Demo

DÜZENLEME: Bu eklentiler nasıl çalışıyor?

Bu basitleştirilmiş bir açıklamadır:

1. Pencere boyutunu bulun ve tüm resimlerin konumunu ve boyutlarını bulun
2. Görüntü pencere boyutunda değilse, aynı boyutta bir yer tutucuyla değiştirin
3. Kullanıcı aşağı kaydırdığında ve görüntünün konumu <kaydırma + pencere yüksekliği olduğunda, görüntü yüklenir

^{( Düzenleme: bozuk bağlantılar arşivlenmiş kopyalarla değiştirildi)}

AOL'den Dave Artz, geçen yıl Boston'daki jQuery Konferansında optimizasyon üzerine harika bir konuşma yaptı. AOL, kaydırma konumuna göre isteğe bağlı yükleme için Sonar adlı bir araç kullanır. Öğenin bir kısmının veya tamamının görünür olup olmadığını tespit etmek için scrollTop (ve diğerlerini) ile öğe ofsetini nasıl karşılaştırdığına dair ayrıntılar için kodu kontrol edin.

jQuery Sonar

Dave bu slaytlarda Sonar'dan bahsediyor . Sonar 46. slaytta başlarken, genel "talep üzerine yük" tartışması 33. slaytta başlar.

(Şimdiye kadar) iyi çalışıyor gibi görünen kendi temel yöntemimi buldum. Muhtemelen bazı popüler senaryoların ele aldığını düşünmediğim bir düzine şey vardır.

Not - Bu çözüm hızlı ve uygulanması kolaydır, ancak elbette performans için harika değildir. Apoorv tarafından bahsedildiği ve performansın bir sorun olması durumunda developer.google tarafından açıklanan yeni Kesişim Gözlemcisine kesinlikle bakın .

JQuery

$(window).scroll(function() {
    $.each($('img'), function() {
        if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
            var source = $(this).data('src');
            $(this).attr('src', source);
            $(this).removeAttr('data-src');
        }
    })
})

Örnek html kodu

<div>
    <img src="" data-src="pathtoyour/image1.jpg">
    <img src="" data-src="pathtoyour/image2.jpg">
    <img src="" data-src="pathtoyour/image3.jpg">
</div>

Açıkladı

Sayfa kaydırıldığında sayfadaki her bir görüntü kontrol edilir ..

$(this).attr('data-src') - resmin özniteliği varsa data-src

ve bu resimler pencerenin altından ne kadar uzakta ..

$(this).offset().top < ($(window).scrollTop() + $(window).height() + 100)

+ 100'ü istediğiniz gibi ayarlayın (örneğin - 100)

var source = $(this).data('src');- data-src=aka resim url'sinin değerini alır

$(this).attr('src', source); - bu değeri src=

$(this).removeAttr('data-src'); - data-src özniteliğini kaldırır (böylece tarayıcınız, önceden yüklenmiş olan resimlerle uğraşarak kaynakları boşa harcamaz)

Mevcut Koda Ekleme

Bir editör, senin html dönüştürmek için sadece arama ve değiştirme src="ilesrc="" data-src="

Burada oldukça güzel bir sonsuz kaydırma eklentisi var

Kendim hiç programlamadım, ama nasıl çalıştığını hayal ederdim.

1. Bir olay pencere kaydırmasına bağlıdır

   $(window).scroll(myInfinteScrollFunction);
   

2. Çağrılan işlev, kaydırma üstünün pencere boyutundan büyük olup olmadığını kontrol eder

   function myInfiniteScrollFunction() {  
       if($(window).scrollTop() == $(window).height())  
       makeAjaxRequest();  
   }
   

3. Hangi sonucun başlatılacağını, kaçının alınacağını ve veri çekme için gerekli diğer parametreleri belirten bir AJAX isteği yapılır.

   $.ajax({
       type: "POST",
       url:  "myAjaxFile.php",
       data: {"resultNum": 30, "numPerPage": 50, "query": "interesting%20icons" },
       success: myInfiniteLoadFunction(msg)
   });
   

4. Ajax, bazı (büyük olasılıkla JSON formatlı) içeriği döndürür ve bunları loadnig işlevine aktarır.

Umarım bu mantıklıdır.

Her getBoundingClientRect () çağrısı, tarayıcıyı tüm sayfayı yeniden düzenlemeye zorladığından ve web sitenize önemli ölçüde şaka yapacağından, kaydırma olaylarına dinleyici ekleyerek veya setInterval kullanarak tembel yükleme görüntüleri yüksek performans göstermez .

Kullanım Lozad.js kullanır (hiçbir bağımlılıkları ile sadece 569 bayt), IntersectionObserver performantly tembel yük görüntülere.

Görüntü tembel yüklemenin İsviçre Çakısı YUI'nin ImageLoader'ıdır .

Çünkü bu problemde sadece kaydırma konumunu izlemekten daha fazlası var.

Bu Bağlantı benim için çalışıyor demo

1. jQuery loadScroll eklentisini jQuery kitaplığından sonra, ancak gövde etiketini kapatmadan önce yükleyin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script src="jQuery.loadScroll.js"></script>

2. Görüntüleri Html5 data-src özelliğini kullanarak web sayfanıza ekleyin. Normal img'nin src özelliğini kullanarak yer tutucular da ekleyebilirsiniz.

<img data-src="1.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="2.jpg" src="Placeholder.jpg" alt="Image Alt"><img data-src="3.jpg" src="Placeholder.jpg" alt="Image Alt">

3. img etiketlerindeki eklentiyi çağırın ve resimleriniz görüntülendiğinde fadeIn etkisinin süresini belirtin

$('img').loadScroll(500); // in ms

JQuery Lazy kullanıyorum . Test etmem yaklaşık 10 dakika ve web sitelerimden birindeki ( CollegeCarePackages.com ) resim bağlantılarının çoğuna eklemem bir veya iki saat sürdü . Ben HAYIR (none / sıfır) dev herhangi türden bir ilişki, ama bana çok fazla zaman kaydedilmiş ve temelde mobil kullanıcılar için bizim çıkma oranını artırmak yardımcı oldu ve bunu takdir ediyorum.