您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > PHP技术 > PHP应用

PHP 实现页面向下滚动时加载数据 示例源码

作者:UncleToo  来源:原创  日期:2013-12-25 8:14:52
收藏  评论:( 0 )  阅读:854

随着微博的盛行,页面向下滚动时加载数据变的越来越流程,类似瀑布流的效果。这种方法不仅节省了服务器端负载,因为不需要分页就能看到所有的信息,所以也提高了用户体验度,下面UncleToo给大家分享一个利用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('<img src="images/ajax-loader.gif" />');
$("#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代码只要实现读取数据库数据就可以了,因为在上面我们已经实现了滚动的加载的效果。

<?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)){ ?>
<div class="tableRow loadData" id="myData_<?php echo $i;?>">
<div class="firstColumn"><?php echo $i; ?></div>
<div class="secondColumn"><?php echo $result['url']?></div>
</div>
<?php $i++; } ?>


<<点击下载完整代码>>


本文由UncleToo原创,转载请注明出处!



除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/application/757.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论