How to handle “infinite” web pages?
Question
Once upon a time, life was simple: All web pages had finite length and if they didn't fit into the current windows/view size, you'd simply scroll down until you reached the bottom of the page.
But I recently noticed that there is a new trend in the web design world: Bottomless web pages.
Probably the most familiar examples of sites utilizing such pages are Facebook and Twitter: You scroll to the "bottom", only to trigger some refresh that adds content to the page, so the "old bottom" is no longer a bottom and, instead, there is a new "bottom".
In an Android WebView, I need to be able capture all the content currently available on that "page", but I am not sure how to approach this:
Simulate user's scroll down via View.scrollBy(int x, int y) , pageDown() or window.scrollTo() ?
Or is there an API method that does this automatically for me?
Or am I approaching this completely wrong and I shouldn't attempt to get to the "real bottom" in one capture (if possible at all)?
EDIT : It seems that tagging this question javascript communicated the opposite message. I am interested in capturing (then processing) such bottomless pages on Android's WebView, using Java .
4 answers
solution1
2 ACCPTED 2011-05-26 21:38:11
Edit: disregard this answer, I misunderstood the question. Leaving the answer in case others misunderstand the question as well.
You could use the jqPageFlow jQuery plugin , or base yourself on its documentation.
Infinite scroll is another great option.
solution2
0 2011-05-26 21:43:15
This jQuery plugin does just that: http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
Another, with jQuery an PHP: http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html
solution3
0 2011-05-29 06:54:26
Given the following web page:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- website code -->
<!-- The endless articles you want to process -->
<div class="article">
</div>
<div class="article">
</div>
<div class="article">
</div>
<!-- ... -->
</body>
</html>
Here would be the code to use:
(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));
Just change the $elements selector to what you want to look for. Then, you should be okay. It is verbose, but also performance-light.
solution4
0 2011-05-31 12:46:57
Regardless what language do you use, the solution is quite simple. You just catch the bechavior of user (by capturing current y and comparing it to max y od the page), then You have to add some new information to you content, by async connection. That is all. Don't know very well Java so I can only give a hint, but the idea is the same in all technologies/languages.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.