jQuery charge de plus de données sur de défilement

Je me demandais simplement comment puis-je mettre en œuvre plus de données sur les défiler uniquement si la div.le chargement est visible.

Habituellement on cherche pour la hauteur de la page et faites défiler la hauteur, pour voir si nous avons besoin de charger plus de données. mais l'exemple suivant est peu compliqué alors que.

Image suivante est un exemple parfait. il y a deux .chargement de la div sur la zone de liste déroulante. Lorsque l'utilisateur de faire défiler le contenu, celle qui est visible, il doit commencer à charger plus de données pour cela.

jQuery charge de plus de données sur de défilement

Alors, comment puis-je savoir si .chargement de la div est visible à l'utilisateur encore ou pas? Pour que je puisse commencer le chargement de données pour que la div seulement.

InformationsquelleAutor Basit | 2012-12-26
  1. 263

    En jQuery, vérifiez si vous avez touché le fond de page à l'aide de fonctions de défilement. Une fois que vous frappez que, faire un appel ajax (vous pouvez montrer un chargement de l'image ici jusqu'à ajax réponse) et d'obtenir le jeu de données suivant, l'ajouter à la div. Cette fonction est exécutée lorsque vous faites défiler la page à nouveau.

    $(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           //ajax call get data from server and append to the div
    }
});
    • Cette solution est grande et la plus simple 😉 Vous pouvez améliorer ce code avec des lignes suivantes dans l'appel ajax: new_element.hide().appendTo('.your_div').fadeIn(); $(window).scrollTop($(window).scrollTop()-1); Première ligne ajoute les éléments de belle manière, deuxième assure que votre fonction ne s'arrête jamais, au bas de la page.
    • Je m'approche de ce de manière similaire, de la comptabilité pour le fait que vous avez toujours arbitraire des trucs (de navigation) au bas de votre page, et vous voulez vraiment de la charge avant d'avoir atteint le fond. Donc ma fonction interne est: var end = $("#BottomThing").offset().top; var viewEnd = $(window).scrollTop() + $(window).height(); var distance = end - viewEnd; if (distance < 300) // do load
    • Ryan Bates a un excellent épisode à ce sujet: railscasts.com/episodes/114-endless-page. Il y a aussi une version révisée, mais vous pouvez avoir besoin d'un abonnement.
    • Si quelqu'un aimerais savoir si un utilisateur a un défilement vers le bas il peut utiliser ce si la condition à l'intérieur de la si qui affiche ici: if($(window).scrollTop() + $(window).hauteur() == $(document).height()) { console.log ("Défile vers le bas !'); }
    • Cette réponse n'est pas ce que j'ai demandé dans la question.
    • ses est utile pour sur de défilement de la fenêtre ce qui est de la formule lorsque le défilement est entre les deux , j'ai de la moyenne des carrés à l'intérieur carré puis quand sroll besoin de haut en bas au moyen de quoi faire, j'ai besoin si quelque chose plz help
    • Ne fonctionne pas en responsive

    InformationsquelleAutor deepakssn
  2. 84

    Avez-vous entendu parler de la jQuery Waypoint plugin.

    Ci-dessous est le moyen le plus simple d'appeler les waypoints plugin et ayant le chargement de la page plus de Contenu une fois que vous avez atteint le bas de défilement :

    $(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);
});
    • toute chance d'une démonstration via jsfiddle?
    • bonne suggestion, mais pire js du plugin waypoint.. perdu mon beaucoup de temps.... réponse ci-dessous a été beaucoup plus rapide n plus rapide
    • La réponse ci-dessous ne vous trouve être le meilleur?
    • Vous pouvez vous référer à ma réponse pour les Paresseux Chargeur de mise en œuvre. stackoverflow.com/a/45846766/2702249
    InformationsquelleAutor defau1t
  3. 9

    Voici un exemple:

    1. Sur le défilement vers le bas, les éléments html sont appeneded. Cet ajout mécanisme ne sont effectuées deux fois, puis un bouton avec powderblue de couleur est ajouté à la dernière.

    HTML:

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

    InformationsquelleAutor Om Prakash Sao
  4. 5

    Accepté la réponse à cette question a un problème avec google chrome lorsque la fenêtre est agrandie d'une valeur >100%. Voici le code recommandé par les développeurs de chrome dans le cadre d'un bug que j'avais relevé sur le même.

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

    Pour référence:

    SI la question

    Chrome Bug

    InformationsquelleAutor Prasanth K C
  5. 2

    Si pas la totalité de votre document défile, dire, lorsque vous avez un défilement div dans le document, puis les solutions ci-dessus ne fonctionnent pas sans adaptations. Voici comment faire pour vérifier si le div de la barre de défilement a touché le fond:

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

    J'ai passé du temps à essayer de trouver une belle fonction pour envelopper une solution. De toute façon, il a terminé avec ce qui me semble une des meilleures solutions lorsque le chargement de plusieurs de contenu sur une seule page ou sur un site.

    Fonction:

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

    Vous pouvez ensuite appeler la fonction en utilisant la fenêtre de défilement (par exemple, vous pouvez également l'attacher à un click, etc. comme je l'ai également le faire, donc la fonction):

    À utiliser:

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

    Cette approche devrait également fonctionner pour faire défiler les divs etc. J'espère que cela aide, dans la question ci-dessus, vous pouvez utiliser cette approche pour charger votre contenu en sections, peut-être ajouter et ainsi de dribbler nourrir tous que les données de l'image plutôt que de l'alimentation en bloc.

    J'ai utilisé cette approche pour réduire la charge sur https://www.taxformcalculator.com. Il est décédé le truc, si vous regardez le site et inspecter l'élément, etc. vous pouvez voir l'impact sur le chargement de la page dans le navigateur Chrome (par exemple).

    InformationsquelleAutor Pete - iCalculator