看了xingoo大神的博客,把他的示例代码拿了过来,原文链接:http://www.cnblogs.com/xing901022/p/5052780.html
示例代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>无限翻页测试</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7 <style type="text/css"> 8 #spinner{ 9 position: fixed; 10 top: 20px; 11 left: 40%; 12 display: block; 13 color: red; 14 font-weight: 900; 15 background-color: rgba(80, 80, 90, 0.22); 16 padding-top: 20px; 17 padding-bottom: 20px; 18 padding-left: 100px; 19 padding-right: 100px; 20 border-radius: 15px; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="sample"> 26 </div> 27 <div id="spinner"> 28 正在加载 29 </div> 30 <script type="text/javascript"> 31 var index = 0; 32 function lowEnough(){ 33 var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight); 34 var viewportHeight = window.innerHeight || 35 document.documentElement.clientHeight || 36 document.body.clientHeight || 0; 37 var scrollHeight = window.pageYOffset || 38 document.documentElement.scrollTop || 39 document.body.scrollTop || 0; 40 // console.log(pageHeight); 41 // console.log(viewportHeight); 42 // console.log(scrollHeight); 43 return pageHeight - viewportHeight - scrollHeight < 20; 44 } 45 46 function doSomething(){ 47 var htmlStr = ""; 48 for(var i=0;i<10;i++){ 49 htmlStr += "这是第"+index+"次加载<br>"; 50 } 51 $('#sample').append(htmlStr); 52 index++; 53 pollScroll();//继续循环 54 $('#spinner').hide(); 55 } 56 57 function checkScroll(){ 58 if(!lowEnough()) return pollScroll(); 59 60 $('#spinner').show(); 61 setTimeout(doSomething,900); 62 63 } 64 function pollScroll(){ 65 setTimeout(checkScroll,1000); 66 } 67 checkScroll(); 68 </script> 69 </body> 70 </html>