滚屏加载ITeye - AG环亚娱乐

滚屏加载ITeye

2019-01-12 19:00:51 | 作者: 康震 | 标签: 加载,数据,页面 | 浏览: 1104

注:本例运用的数据来源于本站文章:PHP+Mysql+jQuery完成发布微博程序--PHP篇,文中有创立数据表的介绍。

jQuery

1、首要,咱们要获取浏览器可视区域页面的高度:

var winH = $(window).height();

 

2、然后,当翻滚页面的时分需求做的工作是:核算页面总高度(当翻滚底部时,页面新加载数据,所以页面总高度是动态改变的),核算翻滚条方位(翻滚条方位也是跟着加载页面的高度动态改变的),然后结构一个公式,核算相对份额。

$(window).scroll(function () { 
 var pageH = $(document.body).height(); //页面总高度 
 var scrollT = $(window).scrollTop(); //翻滚条top 
 var aa = (pageH-winH-scrollT)/winH; 
});

 

3、当翻滚条挨近页底时,触发ajax加载,在本例中咱们运用jQuery的getJSON办法,向服务端result.php发送恳求,恳求的参数为page,即页数。

if(aa 0.02){ 
 $.getJSON("result.php",{page:i},function(json){ 
 ..... 
 }); 
 }

 

4、假如恳求呼应成功回来JSON数据,则解析JSON数据,并将数据追加到页面DIV#container后,假如没有JSON数据回来,则阐明数据悉数显现结束。

if(json){ 
 var str = ""; 
 $.each(json,function(index,array){ //遍历 
 var str = "..."; //获取的JSON数据 
 $("#container").append(str); //追加 
 }); 
 i++; //页数+1 
}else{ 
 $(".nodata").show().html("别翻滚了,现已究竟了。。。"); 
 return false; 
}

 

完好的jQuery代码如下:

$(function(){ 
 var winH = $(window).height(); //页面可视区域高度 
 var i = 1; //设置当时页数 
 $(window).scroll(function () { 
 var pageH = $(document.body).height(); 
 var scrollT = $(window).scrollTop(); //翻滚条top 
 var aa = (pageH-winH-scrollT)/winH; 
 if(aa 0.02){ 
 $.getJSON("result.php",{page:i},function(json){ 
 if(json){ 
 var str = ""; 
 $.each(json,function(index,array){ 
 var str = " div "single_item\" div "element_head\" 
 var str += " div "date\" "+array[date]+" /div 
 var str += " div "author\" "+array[author]+" /div 
 var str += " /div div "content\" "+array[content]+" /div /div 
 $("#container").append(str); 
 }); 
 i++; 
 }else{ 
 $(".nodata").show().html("别翻滚了,现已究竟了。。。"); 
 return false; 
 }); 
 }); 
});

 

 

result.php

当翻滚到页面底部时,前端Ajax恳求到result.php,该后台程序将依据恳求的数据页数:page,查询数据表中对应的记载,并将记载集以json的格局输出回来给前端处理。

require_once(connect.php); //衔接数据库 
$user = array(demo1,demo2,demo3,demo3,demo4); 
$page = intval($_GET[page]); //获取恳求的页数 
$start = $page*15; 
$query=mysql_query("select * from say order by id desc limit $start,15"); 
while ($row=mysql_fetch_array($query)) { 
 $arr[] = array( 
 content= $row[content], 
 author= $user[$row[userid]], 
 date= date(m-d H:i,$row[addtime]) 
echo json_encode($arr); //转换为json数据输出

 

 

版权声明
本文来源于网络,版权归原作者所有,其内容与观点不代表AG环亚娱乐立场。转载文章仅为传播更有价值的信息,如采编人员采编有误或者版权原因,请与我们联系,我们核实后立即修改或删除。

猜您喜欢的文章