Autoload next page content on scroll down


I'm looking for a script that will autoload new webpage content when users reaches bottom of the page.

Something like this one would be ideal: (my website also has images only).

Anyone knows where I could one of these? It can be premium paid script.

Who is Participating?
gery128Connect With a Mentor Commented:
Hello Tom,

Check out this link:

It has discussion of Infinite Scroll jQuery Plugin. Which enables automatic as well as custom content load at the end of the page.
Michel PlungjanIT ExpertCommented:
Here is one not using jQuery. It is horizontal.
Let me know if it is useful and I can change it for you
<title>Scroll Horizontally</title>
div { display:inline }
<script type="text/javascript">
/* © 2008-2011 Michel Plungjan */
var pageUrl = ""; // the @ will be replaced with the page number 
var nofPages=10;

var throbber = new Image();
throbber.src=''; // waiting image

function getQString() {
  var qs = new Array();
  var loc =;
  if (loc) {
    loc = loc.substring(1); // loose the leading ?
    var parms = loc.split('&');
    for (var i=0;i<parms.length;i++) {
      nameValue = parms[i].split('=');
  return qs;
var qs = getQString();
var pageNumber = parseInt(qs["pagenumber"]); // if you want to scroll to a specific page using pagenumber in the query string
pageNumber  = (isNaN(pageNumber) || pageNumber == null)?0:pageNumber; // starts at 0  
var url = getUrl(pageNumber);

var w =  800;
var h = 1100;
var tId="";
var curScrollPos = 0;
var curPage = 1;
var savePage = 1;
var text = ""; 

function getUrl(pageNumber) {
  return pageUrl.replace(/@/g,pageNumber);

function getPlaceHolder(w,h,cnt) {
  return '<img name="img'+cnt+'" src="'+throbber.src+'" alt="" width="'+w+'" height="'+h+'" />'
function getEmbed(w,h,url,cnt) {          
  return '<img style="display:none" src="'+url+'" onLoad="document.images[\'img'+cnt+'\'].src=this.src" />';
function updateIt() {
  if (savePage == curPage) {
  var prevPage = curPage-1;
  if (prevPage >=1) {
    var prevImg = document.images["img"+prevPage];
    if (prevImg.src.toLowerCase().indexOf('.gif')!=-1) prevImg.src=getUrl(prevPage);
  var curImg = document.images["img"+curPage];
  if (curImg && curImg.src.toLowerCase().indexOf('.gif') !=-1) curImg.src=getUrl(curPage);
  var nextPage = curPage+1;
  if (nextPage <= nofPages) { // <=
    var nextImg = document.images["img"+nextPage];
    if (nextImg.src.toLowerCase().indexOf('.gif')!=-1) nextImg.src=getUrl(nextPage);
  savePage = curPage;
window.onscroll = scrollIt;
function scrollIt() {
  curScrollPos = (document.body.scrollLeft)?document.body.scrollLeft: window.pageXOffset;
  if (isNaN(curScrollPos)) curScrollPos=0; // when scolling to far left
  // here we need code to handle scrolling to extreme right since in FF that does not trigger the last page
  if (curScrollPos >= ((nofPages-1)*w)) curScrollPos=(nofPages*w)

  curPage = (parseInt(curScrollPos/w)+1);
  if (curPage > nofPages) curPage = nofPages;
window.onload=function() {
  var scrollAmount = (pageNumber-1)*w
<body style="overflow:auto">
<script type="text/javascript">
var text = '<table border="1" width='+((w*nofPages)+50)+'>';
text += '<tr align="center">';
for (var i=1;i<=nofPages;i++) {
  text += '<td>page '+ i+'</td>'
text += '</tr><tr>';
for (var i=1;i<=nofPages;i++) {
  text += '<td>';
  if (i == (curPage-1) || i == curPage || i == (curPage+1)) {
    text +=getPlaceHolder(w,h,i)+getEmbed(w,h,getUrl(i),i);
  else text+=getPlaceHolder(w,h,i)
  text += '</td>';
text+='<td width="50"></td></tr><table>'


Open in new window

Michel PlungjanIT ExpertCommented:
Ah, I just looked at the site you suggested.
Mine is not like that, really
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.