标签：oct ack jquer har block play 滚动 ons off
<!DOCTYPE html> <html> <head> <title>无限翻页测试</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> #spinner{ position: fixed; top: 20px; left: 40%; display: block; color: red; font-weight: 900; background-color: rgba(80, 80, 90, 0.22); padding-top: 20px; padding-bottom: 20px; padding-left: 100px; padding-right: 100px; border-radius: 15px; } </style> </head> <body> <div id="sample"> </div> <div id="spinner"> 正在加载 </div> <script type="text/javascript"> var index = 0; function lowEnough(){ var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight); var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; // console.log(document.body.scrollHeight); // console.log(document.body.offsetHeight); // console.log(pageHeight); // console.log(viewportHeight); // console.log(scrollHeight); return pageHeight - viewportHeight - scrollHeight < 20; } function doSomething(){ var htmlStr = ""; for(var i=0;i<10;i++){ htmlStr += "这是第"+index+"次加载<br>"; } $(‘#sample‘).append(htmlStr); index++; pollScroll();//继续循环 $(‘#spinner‘).hide(); } function checkScroll(){ if(!lowEnough()) return pollScroll(); $(‘#spinner‘).show(); setTimeout(doSomething,900); } function pollScroll(){ setTimeout(checkScroll,1000); } checkScroll(); </script> </body> </html>
标签：oct ack jquer har block play 滚动 ons off
原文地址：http://www.cnblogs.com/lubenxin/p/7192289.html
