PHP实现页面向下滚动时加载数据

2013 年 12 月 30 日4690

PHP实现页面向下滚动时加载数据

发布者：chinaitlab

　日期：

2013-12-28 08:30:44　浏览次数：0　(共有_条评论)

查看评论 | 我要评论

　　随着微博的盛行，页面向下滚动时加载数据变的越来越流程，类似瀑布流的效果。这种方法不仅节省了服务器端负载，因为不需要分页就能看到所有的信息，所以也提高了用户体验度，下面给大家分享一个利用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>

　　<div><?php echo $i; ?></div>

　　<div><?php echo $result['url']?></div>

　　</div>

　　<?php $i++; } ?>

>>更多交流，请到ChinaUnix【Linux系统管理论坛】：http://http://www.zjjv.com///bbs/forum-2-1.html

关键词：

相关文章

网友评论

已有0位网友发表了看法

0 0

相关文章