How to load more content whilst scrolling: like bing image search
This is great for any page that could contain potentially an large to infinite amount of data. When a user scrolls to the bottom of the page, in the background a javascript-server connection will feed more data to the page.
User facing page
<!DOCTYPE html>
<html>
<head>
<title>Scroll Forever</title>
<style>
.bump{
display:block;
border: 1px solid black;
padding: 10px;
}
.loading{
display:block;
border: 1px solid black;
padding: 10px;
background-color: green;
marquee-style: slide;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
index = 0; //The current position of the index
perPage = 40 - 1; //The count per page, we minus one because arrays start at zero.
contentSelector = "#content"; //The CSS selector for the content block
postSelector = ".bump"; //The CSS selector for each post
loadingSelector = ".loading"; //The CSS selector for the loading block
handle = "handle.php"; //The php file to get the JSON data from
function loadData(i,p,clear){
$(loadingSelector).show(); //Show the loading screen
a = typeof(clear) != 'undefined' ? clear : false; //Set to clear the page as false as the default.
$.getJSON(handle, //jQuery function to get JSON data.
{
"index": i, //The index
"max": p, //The maximum posts per load
},
function(data){ //Take the JSON data
var html = "";
var postId = 0;
while(postId < data.length){
html += "<div class='bump'>" + data[postId] + "</div>"; //Do something with it
postId++;
}
if(clear == true){
html += "<div class='loading'>Loading...</div>";
$(contentSelector).html(html);
index = index + perPage; //Advance the index to match the new data.
} else {
$(loadingSelector).before(html);
index = index + perPage; //Advance the index to match the new data.
}
$(loadingSelector).hide();
});
}
$(window).ready(function(){
loadData(index,perPage); //Initially load the data
var w = $(window); //Saving the context to a shorthand variable.
w.scroll(function(){ //When we scroll
if(w.scrollTop() + w.height() == $(document).height()){ //Check if the position is the bottom of the page
loadData(index,perPage); // If so, then we will load more data.
}
});
});
</script> </head> <body>The idea of this demo is to be able to continuously scroll through data. For the demo, the javascript will grab new JSON data from a php file that just gives a larger and larger number. <div id="content"> <div>Loading...</div> </div> </body> </html>
Back end (save as handle.php)
<?php
/*
Handle.php - Part of the Continueous Scroll demo.
Spits a continueously larger and larger number in an array.
*/
if(isset($_REQUEST['index']) && isset($_REQUEST['max'])){
$start = $_REQUEST['index'];
$max = $_REQUEST['max'];
$i = 0;
$data = array();
while( $i <= $max ){
$data[$i] = $i + $start; //Heres a random note. I found that if you don't know how much you're expecting to get, it's eaiser to just start the array at zero. You can put a unique ID within a sub level array.
$i++;
}
} else {
$data = array(
"Error" => "Please post with the index and max argument",
);
}
echo json_encode($data);
?>
One idea for a modification, is to begin loading when the user is scrolled halfway through the newly loaded content. This way even newer content is loaded before the user even sees the end.
2 Comments »
Vincent November 6, 2012 8:45 pm
Ouch, I’m not experiencing any issues but I’d like to know what’s happening maybe I can help.
Is this happening only in your environment, or is it happening on my demo page (Linked to from my blog post)? What are the errors that are being returned?
Vincent Prime
Lasse Rafn November 6, 2012 5:45 pm
Well.. Works FINE, but with tons of errors (ALL BROWSERS)
– When I scroll down, it will load the same entries if scrolled while loading.. Like:
1,2,3,4,5,6,7,8,9,10…loading (and scrolling).. 11,12,13,14,15,16,17,18,19,20,11,12,13,14,15,16,17,18,19,20,21,22,23,24…. Have tried like 3 other “tuts” and all leaved me same error…