Comment gérer des pages Web “infinies”?

Il était une fois, la vie était simple: toutes les pages Web avaient une longueur finie et si elles ne correspondaient pas à la taille actuelle de la fenêtre / vue, il vous suffirait de faire défiler l’écran jusqu’au bas de la page.

Mais j’ai récemment remarqué qu’il y avait une nouvelle tendance dans le monde de la conception Web: les pages Web sans fond .

Les exemples les plus connus de sites utilisant de telles pages sont Facebook et Twitter: vous faites défiler vers le “bas”, uniquement pour déclencher une actualisation qui ajoute du contenu à la page; il y a un nouveau “fond”.

Dans une WebView Android, je dois pouvoir capturer tout le contenu actuellement disponible sur cette “page”, mais je ne suis pas sûr de savoir comment aborder ceci:

Simuler le défilement de l’utilisateur via View.scrollBy (int x, int y) , pageDown () ou window.scrollTo () ?

Ou existe-t-il une méthode API qui effectue cela automatiquement pour moi?

Ou suis-je en train de penser que c’est complètement faux et que je ne devrais pas essayer de me rendre au “fond” en une capture (si possible)?

EDIT : Il semble que le marquage de cette question par javascript communiqué le message opposé. Je suis intéressé par la capture (puis le traitement) de telles pages sans fond sur WebView d’Android, en utilisant Java .

Edit: ignorer cette réponse, j’ai mal compris la question. Laissant la réponse au cas où d’autres comprendraient mal la question également.

Vous pouvez utiliser le plugin jquery jqPageFlow ou vous baser sur sa documentation.

Le défilement infini est une autre excellente option.

Ce plugin jQuery fait justement cela: http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

Un autre, avec jQuery un PHP: http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html

Quelle que soit la langue que vous utilisez, la solution est assez simple. Vous attrapez simplement le comportement de l’utilisateur (en capturant le y actuel et en le comparant au maximum de la page), puis vous devez append de nouvelles informations à votre contenu, par connexion asynchrone. C’est tout. Je ne connais pas très bien Java, je ne peux donc donner qu’une indication, mais l’idée est la même dans toutes les technologies / tous les langages.

Étant donné la page Web suivante:

Voici le code à utiliser:

 (function($) { // closure $(function() { // when the document is ready var height = $(this).height(), // get initial height lastEl = null, // track last element processed getData = // this function will process the data as it comes in function() { var $elements = $(".article"); // don't reprocess data if(lastEl) { $elements = $elements .slice($elements.index(lastEl)+1); } lastEl = $elements .each(function() { // do what you want with the element }) // save the last element processed .get(-1) || lastEl; // finally, scroll to the bottom of the page $(window).scrollTop($(document).height()); }; $(document).bind('DOMSubtreeModified', function() { var newHeight = $(this).height(); if(newHeight != height) { height = newHeight; getData(); } }); getData(); }); })(jQuery));

Il suffit de changer le sélecteur $ elements en ce que vous voulez rechercher. Alors, ça devrait aller. Il est verbeux, mais aussi performant.