jQuery carica più dati su scroll

148

Mi sto solo chiedendo come posso implementare più dati su scroll solo se il div.loading è visibile.

Di solito cerchiamo l'altezza della pagina e l'altezza di scorrimento, per vedere se è necessario caricare più dati. ma il seguente esempio è poco complicato.

L'immagine seguente è un esempio perfetto. ci sono due div .loading nella casella a discesa. Quando l'utente scorre il contenuto, qualunque sia visibile dovrebbe iniziare a caricare più dati per esso.

inserisci qui la descrizione dell'immagine

Quindi, come posso sapere se .loading div è ancora visibile all'utente o no? Quindi posso iniziare a caricare i dati solo per quel div.

javascript  jquery  ajax  scroll 
— Basit
fonte

Risposte:

286

In jQuery, controlla se hai toccato il fondo della pagina usando la funzione di scorrimento. Una volta colpito, effettua una chiamata Ajax (puoi mostrare un'immagine di caricamento qui fino alla risposta Ajax) e ottenere il prossimo set di dati, aggiungendolo al div. Questa funzione viene eseguita mentre si scorre di nuovo la pagina.

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call get data from server and append to the div
    }
});
— deepakssn
fonte
5
Questa soluzione è eccezionale e la più semplice;) Puoi migliorare questo codice con le seguenti linee in una chiamata Ajax: la new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop()-1);prima riga aggiunge elementi in modo carino, la seconda assicura che la tua funzione non si fermi mai nella parte inferiore della pagina.
— alekwisnia,
34
Mi avvicino a questo in modo simile, tenendo conto del fatto che hai sempre cose arbitrarie (navigazione) nella parte inferiore della tua pagina e che vuoi davvero caricare prima di toccare il fondo. Quindi la mia funzione interiore è: var end = $("#BottomThing").offset().top; var viewEnd = $(window).scrollTop() + $(window).height(); var distance = end - viewEnd; if (distance < 300) // do load
— Jeff Putz il
2
Ryan Bates ha un episodio eccellente al riguardo: railscasts.com/episodes/114-endless-page . Esiste anche una versione rivista ma potrebbe essere necessario un abbonamento.
— V,
4
Se a qualcuno piace sapere se un utente ha fatto scorrere verso il basso, può utilizzarlo se all'interno della condizione visualizzata qui: if ($ (window) .scrollTop () + $ (window) .height () == $ (document ) .height ()) {console.log ('Scorrimento verso il basso!'); }
— Roy Shoa,
5
Questa risposta non è quella che ho posto nella domanda.
— Basit
84

Hai sentito parlare del plugin jQuery Waypoint .

Di seguito è riportato il modo semplice di chiamare un plug-in di waypoint e fare in modo che la pagina carichi più contenuto quando si raggiunge il fondo dello scorrimento:

$(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
fonte
8
qualche possibilità di una dimostrazione tramite jsfiddle?
— cwiggo,
4
buon suggerimento ma peggiore waypoint del plugin js .. ho perso molto tempo .... la risposta di seguito è stata molto più veloce n più veloce
— Karan Datwani
2
Quale risposta di seguito hai trovato essere la migliore?
— martedì
Puoi fare riferimento alla mia risposta per l'implementazione di Lazy Loader. stackoverflow.com/a/45846766/2702249
— Om Sao
9

Ecco un esempio:

  1. Scorrendo verso il basso, vengono aggiunti elementi html. Questo meccanismo di aggiunta viene eseguito solo due volte, quindi viene infine aggiunto un pulsante con il colore blu polvere.

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

— Om Sao
fonte
@RohanAshik: ho appena controllato. Sta funzionando. Prova a scorrere verso il basso fino alla fine.
— Om Sao
@Om Prakash Sao Funziona benissimo qui, ma quando eseguo questo codice in modo sublime, l'evento funziona quando la barra di scorrimento tocca la parte superiore e non inferiore, \
— geek
8

La risposta accettata a questa domanda ha qualche problema con Chrome quando la finestra viene ingrandita su un valore> 100%. Ecco il codice raccomandato dagli sviluppatori Chrome come parte di un bug che avevo sollevato sullo stesso.

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

Per riferimento:

Domanda SO relativa

Chrome Bug

— Prasanth KC
fonte
7

Se non tutti gli scroll divdel documento, ad esempio, quando si dispone di uno scorrimento all'interno del documento, le soluzioni precedenti non funzioneranno senza adattamenti. Ecco come verificare se la barra di scorrimento del div ha toccato il fondo:

$('#someScrollingDiv').on('scroll', function() {
    let div = $(this).get(0);
    if(div.scrollTop + div.clientHeight >= div.scrollHeight) {
        // do the lazy loading here
    }
});
— The Coprolal
fonte
Grazie fratello! Questo mi ha davvero aiutato :)
— Raru,
1

Ho trascorso un po 'di tempo a cercare una bella funzione per avvolgere una soluzione. Comunque, ho finito con questo, che ritengo sia una soluzione migliore quando si caricano più contenuti su una singola pagina o su un sito.

Funzione:

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

È quindi possibile chiamare la funzione utilizzando la finestra sullo scorrimento (ad esempio, è possibile anche associarla a un clic, ecc. Come faccio anche io, quindi la funzione):

Usare:

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

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

Questo approccio dovrebbe funzionare anche per lo scrolling di div ecc. Spero che sia di aiuto, nella domanda sopra potresti usare questo approccio per caricare il tuo contenuto in sezioni, magari aggiungere e quindi dribblare tutti i dati di immagine piuttosto che feed di massa.

Ho usato questo approccio per ridurre il sovraccarico su https://www.taxformcalculator.com . È morto il trucco, se guardi il sito e controlli l'elemento ecc. Puoi vedere l'impatto sul caricamento della pagina in Chrome (ad esempio).

— Pete - iCalculator
fonte
1

Miglioramento della risposta @deepakssn. È possibile che i dati vengano caricati un po ' prima di scorrere verso il basso .

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] viene utilizzato per bloccare la chiamata fino a quando non vengono aggiunti nuovi dati.

Spero che questo ti aiuti.

— Moonis Abidi
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.