浏览器滚动加载技术实现方案
2014年6月3日 09:24:03
先占个位,随后补上,免得我忘了 ;)
2014年6月18日 09:47:06
ajax用到了jquery,需要引用
1 <body> 2 <div class="list-box clearfix" id="list-box" currentpage="1"> 3 <!-- 动态内容 --> 4 </div> 5 6 <div class="load" style="display:none;font-size:14px;text-align:center">正在加载</div> 7 <div class="end" style="dispaly:none;font-size:14px;text-align:center">已加载完</div> 8 9 <script> 10 function insertcode() 11 { 12 var targetdiv = document.getElementById('list-box'); 13 var curpage = targetdiv.getAttribute('currentpage'); 14 if (curpage == '0') { 15 curpage = 1; 16 }; 17 var ajax_url = 'url/to/get/ajax/info'+curpage; 18 //ajax 请求 19 $.get(ajax_url, function(data) { 20 if (data != false) { 21 var jsonInfo = '('+data+')'; //关联数组json后传递给js需要两边加上圆括号转换 22 var objInfo = eval(jsonInfo); //将PHP返回的json,转换为js的对象 23 var arrInfo = objInfo.game; //抽出返回的主要数据项 24 targetdiv.setAttribute('currentpage', objInfo.next_start);//记录下次发起ajax请求时从哪条记录开始,此处由PHP端返回 25 26 var intLength = arrInfo.length; 27 for (var i = 0; i < intLength; i++) { 28 var divTemplate = '<div style="height:50px;width=50px;background-color:#cccccc"> '+ arrInfo[i].id +'- '+ arrInfo[i].name +'-'+ arrInfo[i].content +'</div>'; 29 $('.list-box').append(divGameTemplate); //填充 30 }; 31 32 $(".load").hide(); 33 } else { 34 $(".end").show(); 35 return; 36 } 37 }); 38 }; 39 insertcode(); 40 $(document).ready(function () { 41 $(window).scroll(function () { 42 //判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度 43 //不提前加载,保证页面footer可能出现的友情链接等也能随时被点击到 44 if (($(window).height() + $(window).scrollTop()) >= $(document).height()) { 45 $(".load").show(); 46 insertcode(); 47 } 48 }); 49 }); 50 </script> 51 </body>
注意:
1, 需要填充的html代码没有用createElement一个个的生成,而是使用一个"模版",和jquey的append整体去填充
2, PHP返回的数据是json过的array,如果这个array是一个关联数组,在eval的时候需要两边拼接上圆括号
-------------
js for循环对象:
//一维数组 for (x in data) { txt = data[x]; } //二维数组 for (x in person) { txt = data[x].key; }
