PHP实现页面向下滚动时加载数据
欢迎进入Linux社区论坛,与200万技术人员互动交流 >>进入 随着微博的盛行,页面向下滚动时加载数据变的越来越流程,类似瀑布流的效果。这种方法不仅节省了服务器端负载,因为不需要分页就能看到所有的信息,所以也提高了用户体验度,下面给大家分享一个利用P
欢迎进入Linux社区论坛,与200万技术人员互动交流 >>进入
随着微博的盛行,页面向下滚动时加载数据变的越来越流程,类似瀑布流的效果。这种方法不仅节省了服务器端负载,因为不需要分页就能看到所有的信息,所以也提高了用户体验度,下面给大家分享一个利用PHP+jQuery简单实现这一效果的例子。
因为要用到jQuery函数,所以引入jQuery类库是必不可少的,这里不在介绍了,下面提供给大家的源码中有jQuery文件,大家可以直接拿去使用。
然后在需要滚动加载信息的页面输入下面的JS代码(如果有多个页面需要,那么你也可以将它单独保存到js文件中):
$(document)。ready(function(){
$(window)。scroll(function(){
scrollMore();
});
function scrollMore(){
if($(window)。scrollTop() == ($(document)。height() - $(window)。height())){
var offset = $('[id^="myData_"]')。length;
var records = $(".allData")。text();
$(window)。unbind("scroll");
if(records != offset){
$("#loaderImg")。html('');
$("#loaderImg")。show();
loadMoreData(offset);
}
}
}
function loadMoreData(offset){
$.ajax({
type: 'get',
async:false,
url: 'getMoreData.php',
data: 'offset='+offset,
success: function(data){
$("#loaderImg")。empty();
$("#loaderImg")。hide();
$(".loadData :last")。after(data);
},
error: function(data){
alert("ajax error occured…"+data);
}
})。done(function(){
$(window)。bind("scroll",function(){
scrollMore();
});
});
}
});
下面是PHP代码:
这里PHP代码只要实现读取数据库数据就可以了,因为在上面我们已经实现了滚动的加载的效果。
include('connection.php');
$offset = (isset($_REQUEST['offset']) && $_REQUEST['offset']!='') ?
$_REQUEST['offset'] : '';
$limit = 10;
$qry1 = mysql_query("select * from message limit ".$offset.", ".$limit."");
$i = ++$offset;
while($result = mysql_fetch_array($qry1)){ ?>