php 無限滾動加載,jquery+ajax+php建立無限滾動頁面

jquery+ajax+php建立無限滾動頁面

html檔案：

Endless Scroll

body{ font-family: "Trebuchet MS",verdana,arial;}

#loading{ display:none; font-weight:bold;color:#FF0000;}

p { padding:10px;}

Test Paragraph 1

Test Paragraph 2

Test Paragraph 3

loading data...

$(document).ready(function()

{

$(window).scroll(loadData);

});

var counter = 0;

function loadData()

{

if(counter < 5)

{

if (isUserAtBottom())

{

getData();

}

}

}

function isUserAtBottom()

{

return ((($(document).height() - $(window).height()) - $(window).scrollTop()) <= 50) ? true : false;

}

function getData()

{

$(window).unbind('scroll');

$('#loading').show();

$.get(

'data.php',

{},

function(response)

{

counter++;

$('#loading').hide();

$('#container').append(response);

$(window).scroll(loadData);

});

}

data.php檔案：

echo '

This data has been

loaded from server...

';

?>