浏览器滚动加载技术实现方案

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;

}

 

你可能感兴趣的:(浏览器)