it-swarm.com.de

jQuery lädt mehr Daten beim Scrollen

Ich frage mich nur, wie ich mehr Daten in scroll 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 etwas kompliziert.

Das folgende Bild ist ein perfektes Beispiel. Es gibt zwei .loading-Divs in der Dropdown-Box. Wenn der Benutzer den Inhalt durchblättert, sollte er, je nachdem, welcher sichtbar ist, weitere Daten laden.

enter image description here

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.

126
Basit

Überprüfen Sie in jQuery, ob Sie mit der Bildlauffunktion am unteren Rand der Seite angekommen sind. Sobald Sie das getroffen haben, führen Sie einen Ajax-Aufruf aus (Sie können hier ein Ladebild bis zur Ajax-Antwort anzeigen), und die nächsten Daten werden abgerufen und an das Div angehängt. 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
    }
});
252
deepakssn

Haben Sie vom jQuery Waypoint Plugin gehört.

Im Folgenden finden Sie die einfache Methode, ein Wegpunkt-Plugin aufzurufen und die Seite mit mehr Inhalten zu laden, sobald Sie beim Scrollen das Ende 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);
});
84
defau1t

Hier ist ein Beispiel:

  1. Beim Scrollen nach unten werden HTML-Elemente angezeigt. Dieser Anhänge-Mechanismus wird nur zweimal ausgeführt, und zuletzt wird eine Schaltfläche mit der Farbe Powderblue angefügt.

<!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>

8
Om Prakash Sao

Die akzeptierte Antwort auf diese Frage hat einige Probleme mit Chrome, 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 im Zusammenhang mit diesem Problem angesprochen hatte.

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

Als Referenz:

Verwandte SO Frage

Chrome Bug

3
Prasanth K C

Wenn nicht alle Dokumente Ihres Dokuments gescrollt werden, z. B. wenn Sie innerhalb des Dokuments eine Scrollvariable div haben, funktionieren die oben genannten Lösungen nicht ohne Anpassungen. So prüfen Sie, ob die Bildlaufleiste des Divs unten angekommen ist:

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});
1
The Coprolal

Ich habe einige Zeit damit verbracht, eine Nice-Funktion zu finden, um eine Lösung zu verpacken. Am Ende ist dies meiner Meinung nach eine bessere Lösung, wenn mehrere Inhalte auf eine einzelne Seite oder über eine 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 mithilfe von window on scroll aufrufen (z. B. können Sie sie auch an einen Klick binden usw., wie ich es auch mache, daher die Funktion):

Benutzen:

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

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

Dieser Ansatz sollte auch für das Scrollen von divs usw. funktionieren. Ich hoffe, es hilft, in der obigen Frage könnten Sie diesen Ansatz verwenden, um Inhalte in Abschnitten zu laden, vielleicht alle Bilddaten anzuhängen und dadurch zu dribbeln, anstatt Massen-Feeds zu verwenden.

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

0