Défilement continu avec points de passage jQuery

J’essaie de suivre cette réponse afin de créer une technique de défilement infini. Dans mon exemple de code, pourquoi ne fonctionne-t-il pas? Je voudrais simuler que le contenu soit chargé chaque fois que j’atteins le bas. Actuellement, cela ne fonctionne que pour un montant fini.

Après avoir lu la documentation, je pense que je ne rafraîchis pas correctement. Je soupçonne que le recalcul du “sharepoint déclenchement” ne déclenche pas. Je ne sais pas comment le faire fonctionner.

Dans mon exemple, je simule le nouveau contenu en cours de chargement en appelant la fonction getMore () qui ajoute plus de Div. Je veux obtenir l’effet que cette page ne finit jamais.

S’il vous plaît voir: jsfiddle

• Texte d’état de la mise à jour de la barre de progression du bootstrap à intervalles terminés 25%, 50%, 75%, 100%
• NomFichier de l’URL à l’exclusion de la chaîne de requête
• Ajout d’une classe à la première div d’un ensemble de div créées dynamicment
• jQuery chaque résultat de fonction, comment faire?
• $ .when ($ (“”). function () == true) .then () ne fonctionne pas comme prévu

HTML:

 
 
 
Some text here.
 
Some text here.
 
Some text here.
 
Some text here.
 
 
 
  

Javascript:

 $(document).ready(function() { var pageId=0; $("#waypoint").waypoint(function(direction) { if (direction === 'down') { getMore(++pageId); } }, { context: '.viewport .viewport-content', offset: 'bottom-in-view' }); function getMore(myPageId) { console.log("Loading page " + myPageId); for (var i=1; i<11; i++) { $("#messages").append("
Page " + myPageId + ". Row " + i + ".
"); } $.waypoints('refresh'); } }); 

https://stackoverflow.com/questions/22845377/continuous-scrolling-with-jquery-waypoints/demo.html (Exemple de démo du raccourci de défilement infini)

      * { margin:0; padding:0; } body { font-size:16px; line-height:1.5; color:#6a6272; background:#d5c5e5; padding-bottom:16px; font-family:"Lato", sans-serif; } .inner { width:460px; padding:0 10px; margin:0 auto; } h1, h2, h3, h4 { font-family:"PT Serif", serif; font-weight:normal; } h1 { font-size:53px; color:#444a50; } h2 { text-align:center; background:#6a6272; color:#eae2f2; font-size:24px; } pre { white-space:pre-wrap; font-size:14px; background:#fff; padding:10px; } code { font-family:"Ubuntu Mono", monospace; } p, pre, ul, .example, dl { margin-top:16px; } h3 { font-size:24px; } ol { margin-left:12px; } li { margin-top:6px; } .steps { background:#6a6272; color:#eae2f2; padding:16px 0; margin-top:16px; } .options { background:#6a6272; color:#eae2f2; padding:16px 0; margin-top:16px; } dt { font-weight:bold; color:#fff; margin-top:6px; } dd { margin-left:16px; } .fn { color:#111; } .kw { color:#a33; } .str { color:#3a3; } .cm { color:#33a; } .key { color:#939; } p code, li code, dl code { padding:0 2px; background:#eae2f2; } .steps li code, .options dl code { background:#444a50; } .options strong, .steps strong { color:#fff; } pre code { color:#888; } .infinite-container { width:480px; margin-left:-20px; overflow:hidden; position:relative; } .infinite-container.infinite-loading:after { content:"Loading..."; height:30px; line-height:30px; position:absolute; left:0; right:0; bottom:0; text-align:center; background:#6a6272; color:#eae2f2; } .infinite-item { float:left; width:100px; height:100px; background:#444a50; margin:20px 0 20px 20px; } .infinite-item:nth-child(3n) { background:#6a6272; } .infinite-item:nth-child(3n+1) { background:#eae2f2; } .infinite-more-link { visibility:hidden; }    
 
Example
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 More 
     $(document).ready(function() { $('.infinite-container').waypoint('infinite'); });    

• Comment jQuery désactive-t-il la mise en cache AJAX?
• Améliorer les performances de ce script jQuery
• split travaillant en boucle pour appeler JSON en 2 parties avec jquery / javascript
• DataTables Plusieurs tables de plusieurs tableaux JSON
• Comment actualiser un object SQLalchemy à l’aide de jQuery sans charger la page Web

 var myPageId = 1; function getMore(e) { for (var i=1; i<11; i++) { $("#messages").append("
Page " + myPageId + ". Row " + i + ".
"); } myPageId++; } $('#waypoint').bind('enterviewport', getMore ).bullseye(); 

 $(document).ready(function() { var pageId=0; var waypoint = new Waypoint({ element: $("#waypoint"), handler: function(direction) { if (direction === 'down') { getMore(++pageId); Waypoint.refreshAll(); } }, offset: 'bottom-in-view' }); function getMore(myPageId) { console.log("Loading page " + myPageId); for (var i=1; i<11; i++) { $("#messages").append("
Page " + myPageId + ". Row " + i + ".
"); } } });