无限分页

简介: 看了xingoo大神的博客,把他的示例代码拿了过来,原文链接:http://www.cnblogs.com/xing901022/p/5052780.html 示例代码: 1 2 3 4 无限翻页测试 5 6 7 8...

看了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>
View Code

 

目录
相关文章
|
3月前
|
存储 缓存 数据库
别再用offset和limit分页了,性能太差!——探索高效分页技术
【8月更文挑战第27天】在Web开发领域,分页是处理大量数据展示时不可或缺的功能。然而,传统的基于offset和limit的分页方式,在数据量剧增时,其性能问题日益凸显。本文将深入探讨这一问题的根源,并介绍几种更为高效的分页策略,助力你的应用性能飞跃。
180 0
|
3月前
|
缓存 监控 前端开发
大量数据如何做分页处理
【8月更文挑战第13天】面对大量数据分页,可从数据库与应用两方面着手:数据库端利用内置分页功能如MySQL的`LIMIT`与`OFFSET`,及SQL Server的`ROW_NUMBER()`;优化查询,精选字段并为常用排序字段加索引。应用端采用缓存已分页数据、异步加载新页及前端懒加载技术。同时限制最大页数并持续监控优化性能,确保高效查询与良好用户体验。
|
6月前
|
SQL 存储 关系型数据库
深分页怎么导致索引失效了?提供6种优化的方案!
深分页怎么导致索引失效了?提供6种优化的方案!
|
6月前
表格横向布局及分页实现原理
表格横向布局及分页实现原理
40 0
|
6月前
|
存储 缓存 大数据
深度分页问题
深度分页问题
|
6月前
|
存储 SQL 前端开发
解决深度分页问题
解决深度分页问题
|
11月前
|
前端开发 Java UED
通用分页集模糊,全部查询,分页查询为一体(2)演示,优化上篇通用查询分页
通用分页集模糊,全部查询,分页查询为一体(2)演示,优化上篇通用查询分页
|
SQL 关系型数据库 MySQL
|
存储
【补充】分页存储管理中的页表项长度是什么?
【补充】分页存储管理中的页表项长度是什么?
189 0
【补充】分页存储管理中的页表项长度是什么?
|
缓存 前端开发 数据可视化
前端基础向--空表格处理与分页调整,优化用户体验
前端基础向--空表格处理与分页调整,优化用户体验
191 0