jQuery lädt mehr Daten beim Scrollen

148

Ich frage mich nur, wie ich mehr Daten beim Scrollen nur implementieren kann, wenn das div.loading sichtbar ist.

Normalerweise suchen wir nach Seitenhöhe und Bildlaufhöhe, um zu sehen, ob wir mehr Daten laden müssen. aber das folgende Beispiel ist dann wenig kompliziert.

Das folgende Bild ist ein perfektes Beispiel. In der Dropdown-Box befinden sich zwei .loading-Divs. Wenn der Benutzer durch den Inhalt scrollt, sollte er, je nachdem, was sichtbar ist, mehr Daten für ihn laden.

Geben Sie hier die Bildbeschreibung ein

Wie kann ich also herausfinden, ob .loading div für den Benutzer noch sichtbar ist oder nicht? Ich kann also nur Daten für dieses Div laden.

javascript  jquery  ajax  scroll 
— Basit
quelle

Antworten:

286

Überprüfen Sie in jQuery mithilfe der Bildlauffunktion, ob Sie den unteren Rand der Seite erreicht haben. Sobald Sie dies erreicht haben, führen Sie einen Ajax-Aufruf durch (Sie können hier ein Ladebild bis zur Ajax-Antwort anzeigen) und holen Sie sich den nächsten Datensatz und hängen Sie ihn an das div an. Diese Funktion wird ausgeführt, wenn Sie die Seite erneut nach unten scrollen.

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});
— deepakssn
quelle
5
Diese Lösung ist großartig und die einfachste;) Sie können diesen Code mit folgenden Zeilen im Ajax-Aufruf verbessern: In der new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop()-1);ersten Zeile werden Elemente auf nette Weise angehängt, in der zweiten wird sichergestellt, dass Ihre Funktion niemals am Ende der Seite stoppt.
— Alewwisnia
34
Ich gehe das auf ähnliche Weise an und berücksichtige die Tatsache, dass Sie immer willkürliche Dinge (Navigation) am Ende Ihrer Seite haben und wirklich laden möchten, bevor Sie den Boden erreichen. Meine innere Funktion ist also: 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 hat eine ausgezeichnete Folge dazu: railscasts.com/episodes/114-endless-page . Es gibt auch eine überarbeitete Version, aber Sie benötigen möglicherweise ein Abonnement.
— Vee
4
Wenn jemand wissen möchte, ob ein Benutzer nach unten gescrollt hat, kann er diese if-Bedingung innerhalb des hier angezeigten if verwenden: if ($ (Fenster) .scrollTop () + $ (Fenster) .height () == $ (Dokument ) .height ()) {console.log ('Nach unten gescrollt!'); }
— Roy Shoa
5
Diese Antwort ist nicht das, was ich in der Frage gestellt habe.
— Basit
84

Haben Sie schon von dem gehört jQuery Waypoint - Plugin .

Im Folgenden finden Sie die einfache Möglichkeit, ein Wegpunkt-Plugin aufzurufen und die Seite mehr Inhalt laden zu lassen, sobald Sie beim Scrollen den unteren Rand erreicht haben:

$(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
quelle
8
Gibt es eine Chance auf eine Demonstration über jsfiddle?
— Cwiggo
4
guter Vorschlag, aber schlechtester js Plugin Wegpunkt .. verschwendete meine viel Zeit .... Antwort unten war viel schneller und schneller
— Karan Datwani
2
Welche Antwort unten haben Sie als die beste empfunden?
— Wuno
Sie können sich auf meine Antwort für die Implementierung von Lazy Loader beziehen. stackoverflow.com/a/45846766/2702249
— Om Sao
9

Hier ist ein Beispiel:

  1. Beim Scrollen nach unten werden HTML-Elemente angehängt. Dieser Anhängemechanismus wird nur zweimal ausgeführt, und dann wird endlich eine Schaltfläche mit puderblauer Farbe angehängt.

<!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>
Erweitern Sie das Snippet

— Om Sao
quelle
@ RohanAshik: Ich habe gerade nachgesehen. Es funktioniert. Versuchen Sie, bis zum Ende nach unten zu scrollen.
— Om Sao
@Om Prakash Sao Es funktioniert hier gut, aber wenn ich diesen Code in sublime laufen lasse, dann funktioniert das Ereignis, wenn die Bildlaufleiste oben und nicht unten trifft, \
— geeky
7

Wenn nicht alle Ihre Dokumentrollen ausgeführt werden, z. B. wenn Sie divinnerhalb des Dokuments einen Bildlauf durchführen , funktionieren die oben genannten Lösungen ohne Anpassungen nicht. So überprüfen Sie, ob die Bildlaufleiste des Divs den unteren Rand erreicht hat:

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});
— Der Coprolal
quelle
Dank bro! Das hat mir wirklich geholfen :)
— Raru
7

Die akzeptierte Antwort auf diese Frage hat ein Problem mit Chrom, wenn das Fenster auf einen Wert> 100% vergrößert wird. Hier ist der Code, der von Chrome-Entwicklern als Teil eines Fehlers empfohlen wurde, den ich auf demselben ausgelöst hatte.

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

Als Referenz:

Verwandte SO-Frage

Chrome Bug

— Prasanth KC
quelle
1

Ich habe einige Zeit damit verbracht, eine nette Funktion zu finden, um eine Lösung zu finden. Am Ende ist dies meiner Meinung nach eine bessere Lösung, wenn mehrere Inhalte auf einer einzelnen Seite oder auf einer Website geladen werden.

Funktion:

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

Sie können die Funktion dann über das Fenster beim Scrollen aufrufen (Sie können sie beispielsweise auch an einen Klick usw. binden, wie ich es auch tue, daher die Funktion):

Benutzen:

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

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

Dieser Ansatz sollte auch zum Scrollen von Divs usw. funktionieren. Ich hoffe, er hilft. In der obigen Frage können Sie diesen Ansatz verwenden, um Ihre Inhalte in Abschnitte zu laden, möglicherweise alle Bilddaten anzuhängen und damit zu dribbeln, anstatt Massen-Feeds.

Ich habe diesen Ansatz verwendet, um den Overhead auf https://www.taxformcalculator.com zu reduzieren . Es ist der Trick gestorben, wenn Sie sich die Site ansehen und Elemente usw. untersuchen, können Sie die Auswirkungen auf das Laden von Seiten in Chrome sehen (als Beispiel).

— Pete - iCalculator
quelle
1

Verbesserung der @ deepakssn-Antwort. Es besteht die Möglichkeit, dass die Daten etwas geladen werden sollen, bevor wir tatsächlich nach unten scrollen .

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] wird verwendet, um den Anruf zu blockieren, bis neue Daten angehängt werden.

Hoffe das hilft.

— Moonis Abidi
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.