jQuery kaydırma üzerine daha fazla veri yükle

148

Sadece div.loading görünür olduğunda kaydırma üzerinde nasıl daha fazla veri uygulayabilir merak ediyorum.

Daha fazla veri yüklememiz gerekip gerekmediğini görmek için genellikle sayfa yüksekliğini ve kaydırma yüksekliğini ararız. ancak aşağıdaki örnek bundan biraz karmaşıktır.

Aşağıdaki görüntü mükemmel bir örnektir. açılır kutuda iki .loading div vardır. Kullanıcı içeriği kaydırdığında, hangisi görünür olursa, daha fazla veri yüklemeye başlamalıdır.

resim açıklamasını buraya girin

Öyleyse .loading div kullanıcısı için görünür olup olmadığını nasıl öğrenebilirim? Bu yüzden sadece bu div için veri yüklemeye başlayabilirim.

javascript  jquery  ajax  scroll 
— Basit
kaynak

Yanıtlar:

286

JQuery'de, kaydırma işlevini kullanarak sayfanın altına vurup vurmadığınızı kontrol edin. Bir kez vurduktan sonra, bir ajax çağrısı yapın (ajax yanıtına kadar burada bir yükleme resmi gösterebilirsiniz) ve bir sonraki veri kümesini alın, div'e ekleyin. Sayfayı tekrar aşağı kaydırdığınızda bu işlev yürütülür.

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});
— deepakssn
kaynak
5
Bu çözüm harika ve en basittir;) Bu kodu ajax çağrısında aşağıdaki satırlarla geliştirebilirsiniz: new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop()-1);İlk satır öğeleri güzel bir şekilde ekler, ikincisi işlevinizin sayfanın altında asla durmamasını sağlar.
— alekwisnia
34
Buna benzer bir şekilde yaklaşıyorum, her zaman sayfanızın altında rastgele şeyler (gezinme) olduğunu ve alta basmadan önce gerçekten yüklemek istediğinizi açıklıyorum. Benim iç fonksiyonum: var end = $("#BottomThing").offset().top; var viewEnd = $(window).scrollTop() + $(window).height(); var distance = end - viewEnd; if (distance < 300) // do load
— Jeff Putz
2
Ryan Bates bunun hakkında mükemmel bir bölüm var: railscasts.com/episodes/114-endless-page . Düzeltilmiş bir sürümü de var, ancak bir aboneliğe ihtiyacınız olabilir.
— Vee
4
Bir kullanıcı bir kullanıcının aşağıya kaydırıp kaydırmadığını bilmek isterse, burada görüntülenen durumun içinde ise bunu kullanabilir: if ($ (window) .scrollTop () + $ (window) .height () == $ (belge ) .height ()) {console.log ('En alta kaydırıldı!'); }
— Roy Shoa
5
Bu cevap soruda sorduğum soru değil.
— Basit
84

Duymuş jQuery Ara nokta eklentisi .

Aşağıda, bir ara nokta eklentisini çağırmanın ve sayfanın alt kısmına geldiğinizde sayfanın daha fazla İçerik yüklemesini sağlamanın basit yolu verilmiştir:

$(document).ready(function() {
    var $loading = $("<div class='loading'><p>Loading more items&hellip;</p></div>"),
    $footer = $('footer'),
    opts = {
        offset: '100%'
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
        $('body').append($loading);
        $.get($('.more a').attr('href'), function(data) {
            var $data = $(data);
            $('#container').append($data.find('.article'));
            $loading.detach();
            $('.more').replaceWith($data.find('.more'));
            $footer.waypoint(opts);
        });
    }, opts);
});
— defau1t
kaynak
8
jsfiddle ile bir gösteri şansı var mı?
— cwiggo
4
iyi bir öneri ama en kötü js eklentisi ara nokta .. zamanımı boşa harcadım .... aşağıdaki cevap çok daha hızlı n hızlı oldu
— Karan Datwani 17:15
2
Aşağıdaki hangi cevabı en iyi buldunuz?
— wuno
Lazy Loader uygulaması ile ilgili cevabımı başvurabilirsiniz. stackoverflow.com/a/45846766/2702249
— Om Sao
9

İşte bir örnek:

  1. En alta kaydırıldığında, html öğeleri eklenir. Bu ekleme mekanizması sadece iki kez yapılır ve daha sonra toz mavisi rengine sahip bir düğme sonunda eklenir.

<!DOCTYPE html>
<html>
<head>
    <title>Demo: Lazy Loader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <style>
        #myScroll {
            border: 1px solid #999;
        }

        p {
            border: 1px solid #ccc;
            padding: 50px;
            text-align: center;
        }

        .loading {
            color: red;
        }
        .dynamic {
            background-color:#ccc;
            color:#000;
        }
    </style>
    <script>
		var counter=0;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height() && counter < 2) {
                appendData();
            }
        });
        function appendData() {
            var html = '';
            for (i = 0; i < 10; i++) {
                html += '<p class="dynamic">Dynamic Data :  This is test data.<br />Next line.</p>';
            }
            $('#myScroll').append(html);
			counter++;
			
			if(counter==2)
			$('#myScroll').append('<button id="uniqueButton" style="margin-left: 50%; background-color: powderblue;">Click</button><br /><br />');
        }
    </script>
</head>
<body>
    <div id="myScroll">
        <p>
            Contents will load here!!!.<br />
        </p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
        <p >This is test data.<br />Next line.</p>
    </div>
</body>
</html>
Snippet'i genişlet

— Om Sao
kaynak
@RohanAshik: Az önce kontrol ettim. İşe yarıyor. Sonuna kadar aşağı kaydırmayı deneyin.
— Om Sao
@Om Prakash Sao Burada iyi çalışıyor, ancak yüce bu kodu çalıştırdığınızda olay kaydırma çubuğunun alt değil, üst vurmak zaman çalışır, \
— geeky
8

Bu sorunun kabul edilen cevabı, pencere>% 100 değerine yakınlaştırıldığında kromla ilgili bir sorun yaşıyor. İşte aynı geliştirmişti bir hatanın bir parçası olarak krom geliştiricileri tarafından önerilen kod.

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() >= $(document).height()){
     //Your code here
  }
});

Referans için:

İlgili SO sorusu

Chrome Hatası

— Prasanth KC
kaynak
7

Belgenizin tamamı kaydırılmıyorsa, örneğin, belgede kaydırma yaptığınızda div, yukarıdaki çözümler uyarlama olmadan çalışmaz. Div'in kaydırma çubuğunun aşağıya çarpıp çarpmadığını nasıl kontrol edeceğiniz aşağıda açıklanmıştır:

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});
— Koprolal
kaynak
Sağ ol, kanka! Bu gerçekten bana yardımcı oldu :)
— Raru
1

Bir çözümü sarmak için güzel bir işlev bulmaya biraz zaman harcadım. Her neyse, bunu tek bir sayfaya veya bir siteye birden fazla içerik yüklerken daha iyi bir çözüm olduğunu düşünüyorum.

İşlev:

function ifViewLoadContent(elem, LoadContent)
    {
            var top_of_element = $(elem).offset().top;
            var bottom_of_element = $(elem).offset().top + $(elem).outerHeight();
            var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
            var top_of_screen = $(window).scrollTop();

            if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            if(!$(elem).hasClass("ImLoaded"))   {
                $(elem).load(LoadContent).addClass("ImLoaded");
            }
            }
            else {
               return false;
            }
        }

Daha sonra kaydırma penceresini kullanarak işlevi çağırabilirsiniz (örneğin, ben de yaptığım gibi bir tıklama vb.

Kullanmak:

$(window).scroll(function (event) {
        ifViewLoadContent("#AjaxDivOne", "someFile/somecontent.html"); 

        ifViewLoadContent("#AjaxDivTwo", "someFile/somemorecontent.html"); 
    });

Bu yaklaşım divları vb. Kaydırmak için de çalışmalıdır. Umarım yukarıdaki soruda bu yaklaşımı içeriğinizi bölümlere yüklemek için kullanabilirsiniz, belki toplu besleme yerine tüm bu görüntü verilerini ekleyebilir ve böylece damlatabilirsiniz.

Bu yaklaşımı yükü azaltmak için kullandım. https://www.taxformcalculator.com adresindeki . Siteye bakar ve öğeyi vb. İncelerseniz hile öldü (örneğin, Chrome'daki sayfa yükü üzerindeki etkisini görebilirsiniz).

— Pete - iCalculator
kaynak
1

@Deepakssn cevabı geliştiriliyor. Biz gerçekten alta gitmeden önce verilerin biraz yüklenmesini istemeniz ihtimali vardır .

var scrollLoad = true;
$(window).scroll(function(){
 if (scrollLoad && ($(document).height() - $(window).height())-$(window).scrollTop()<=800){
    // fetch data when we are 800px above the document end
    scrollLoad = false;
   }
  });

[var scrollLoad], yeni bir veri eklenene kadar çağrıyı engellemek için kullanılır.

Bu yardımcı olur umarım.

— Moonis Abidi
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.