JS实现-页面数据无限加载
在手机端浏览网页时，经常使用一个功能，当我们浏览京东或者淘宝时，页面滑动到底部，我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的，于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果：
当滚动条滚动到页面底部时，提示“正在加载…”。
当页面已经加载了所有数据后，滚动到页面底部会提示“数据已加载到底了”：
实现数据无限加载的过程大致如下：
1.滚动条滚动到页面底部。
2.触发ajax加载，把请求返回的数据加载到列表后面。
如何判断滚动条是否滚动到页面底部？我们可以设置一个规则：当滚动条的滚动高度和整个文档高度相差不到20像素，则认为滚动条滚动到页面底部了：
文档高度 - 视口高度 - 滚动条滚动高度 < 20
要通过代码实现这样的判断，我们必须要了解上面的这些高度通过哪些代码获取？可以参考我之前写的一篇“HTML元素坐标定位，这些知识点得掌握”。
上面的判断，我封装了一个方法：
//检测滚动条是否滚动到页面底部
function isScrollToPageBottom(){
//文档高度
var documentHeight = document.documentElement.offsetHeight;
var viewPortHeight = getViewportSize().h;
var scrollHeight = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop || 0; return documentHeight - viewPortHeight - scrollHeight < 20;
}
判断有了，我们就可以开启一个定时器，900毫秒监测一次，如果isScrollToPageBottom()返回true则调用ajax请求数据，如果返回false则通过900毫秒之后再监测。
下面是核心代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限分页</title>
<link rel="stylesheet" href="assets/css/index.css"/>
</head>
<body>
<div class="l-page">
<ul id="list" class="list">
</ul>
</div>
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="js/jquery.mockjax.js"></script>
<script type="text/javascript" src="js/dataMock.js"></script>
<script type="text/javascript">
//作为一个对象的w和h属性返回视口的尺寸
function getViewportSize(w){
//使用指定的窗口， 如果不带参数则使用当前窗口
w = w || window; //除了IE8及更早的版本以外，其他浏览器都能用
if(w.innerWidth != null)
return {w: w.innerWidth, h: w.innerHeight}; //对标准模式下的IE（或任意浏览器）
var d = w.document;
if(document.compatMode == "CSS1Compat")
return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight}; //对怪异模式下的浏览器
return {w: d.body.clientWidth, h: d.body.clientHeight};
} //检测滚动条是否滚动到页面底部
function isScrollToPageBottom(){
//文档高度
var documentHeight = document.documentElement.offsetHeight;
var viewPortHeight = getViewportSize().h;
var scrollHeight = window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop || 0; return documentHeight - viewPortHeight - scrollHeight < 20;
} //商品模板
function getGoodsTemplate(goods){
return "<li>" +
"<div class='pic-wrap leftFloat'>" +
"<img src='" + goods.pic + "'>" +
"</div>" +
"<div class='info-wrap leftFloat'>" +
"<div class='info-name'><span>" + goods.name + "</span></div>" +
"<div class='info-address'><span>" + goods.address +"</span></div>" +
"<div class='info-bottom'>" +
"<div class='info-price leftFloat'><span>￥" + goods.price + "</span></div>" +
"<div class='info-star leftFloat'><span>" + goods.star + "人推荐</span></div>" +
"<div class='info-more leftFloat'><span>更多信息</span></div>" +
"</div>" +
"</div>" +
"</li>";
} //初始化的时候默给list加载100条数据
$.ajax("http://localhost:8800/loadData?sessionId=" + (+ new Date)).done(function(result){
if(result.status){
var html = "";
result.data.forEach(function(goods){
html += getGoodsTemplate(goods);
});
$("#list").append(html);
}
}); //加载数据
function loadDataDynamic(){
//先显示正在加载中
if( $("#loadingLi").length === 0)
$("#list").append("<li id='loadingLi' class='loading'>正在加载...</li>");
else{
$("#loadingLi").text("正在加载...").removeClass("space");
}
var loadingLi = document.getElementById("loadingLi");
loadingLi.scrollIntoView();
//加载数据,数据加载完成后需要移除加载提示
var hasData = false, msg = "";
$.ajax("http://localhost:8800/loadData?sessionId=" + (+ new Date)).done(function(result){
if(result.status){
if(result.data.length > 0){
hasData = true;
var html = "";
result.data.forEach(function(goods){
html += getGoodsTemplate(goods);
});
$("#list").append(html);
}else{
msg = "数据已加载到底了"
}
}
$("#list").append(loadingLi);
}).fail(function(){
msg = "数据加载失败!";
}).always(function(){
!hasData && setTimeout(function(){
$(document.body).scrollTop(document.body.scrollTop -40);
}, 500);
msg && $("#loadingLi").text(msg);
//重新监听滚动
setTimeout(watchScroll, 900);
});
} //如果滚动条滚动到页面底部，需要加载新的数据,并且显示加载提示
function watchScroll(){
if(!isScrollToPageBottom()){
setTimeout( arguments.callee, 900);
return; }
loadDataDynamic();
} //开始检测滚动条
watchScroll();
</script>
</body>
</html>
demo中ajax请求我是通过jquery-mockjax模拟的数据。代码如下：
/**
* 模拟接口.
*/
var i = 0, len = 200, addresses = ["四川", "北京", "上海", "广州", "深圳", "甘肃", "云南", "浙江", "青海", "贵州"]; function getData(){
var size = Math.min(i + 50, len), arr = [];
for(; i < size; i++){
arr.push({
name: "苹果" + (i % 10 + 1),
pic: "assets/images/iphone" + (i % 10 + 1) + ".jpg",
price: parseInt(Math.random() * 10000),
star: parseInt(Math.random() * 1000),
address: addresses[i % 10]
})
} return arr;
} $.mockjax({
url: 'http://localhost:8800/loadData*',
responseTime: 1000,
response: function(settings){
this.responseText = {
status: true,
data: getData()
}
}
});
整个完整的demo我已上传到github上：
https://github.com/heavis/pageLoader
在线演示：
https://heavis.github.io/pageLoader/index.html
如果本篇内容对大家有帮助，请点击页面右下角的关注。如果觉得不好，也欢迎拍砖。你们的评价就是博主的动力！下篇内容，敬请期待！
JS实现-页面数据无限加载的更多相关文章
- js实现移动端无限加载分页
原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念: 1.scrollHeight 真实内容的高度 2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的 ...
- js刷新页面得重新加载和页面的刷新
1.reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当 ...
- Vue.js 开发实践：实现精巧的无限加载与分页功能
本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...
- 支持无限加载的js图片画廊插件
natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
- 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件
为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...
- 在页面所有元素加载完成之后执行某个js函数
在页面所有元素加载完成之后执行某个js函数 http://lgscofield.iteye.com/blog/1884352
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)
//平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...
随机推荐
- web api Route属性定义
ASP.NET Web API路由,简单来说,就是把客户端请求映射到对应的Action上的过程.在"ASP.NET Web API实践系列03,路由模版, 路由惯例, 路由设置"一 ...
- Android5.1.1 - APK签名校验分析和修改源码绕过签名校验
Android5.1.1 - APK签名校验分析和修改源码绕过签名校验 作者:寻禹@阿里聚安全 APK签名校验分析 找到PackageParser类,该类在文件“frameworks/base/cor ...
- ABP理论学习之通知系统
返回总目录 本篇目录 介绍 订阅通知 发布通知 用户通知管理者 实时通知 通知存储 通知定义 介绍 通知(Notification)用于告知用户系统中的特定事件.ABP提供了基于实时通知基础设施的发布 ...
- 用“MEAN”技术栈开发web应用（三）用mongodb搭建数据库
上一篇介绍了如何用express搭建起服务端MVC的开发架构,本篇我们来详细介绍一下这个Model层,也就是数据库访问层.包含如何使用mongodb搭建数据库,以及如何使用mongoose来访问数据. ...
- .Net组件程序设计之序列化
.Net组件程序设计之序列化 自动序列化 本篇给大家讲解一下在.NET中的序列化,它的用处非常之多,特别是对于某种环境下保存某种状态是很好的方法,接下来就来看一下吧. Serializable属性 ...
- CSS3 制作一个边框向周围散开的按钮效果
我们将要达到的是如下的效果(若效果未出现请刷新): 分析 主要还是运用CSS3的transition, animation, transform还有渐变背景等特性. 由于按钮在鼠标进入时有不同的样式, ...
- [Unity][Heap sort]用Unity动态演示堆排序的过程(How Heap Sort Works)
[Unity][Heap sort]用Unity动态演示堆排序的过程 How Heap Sort Works 最近做了一个用Unity3D动态演示堆排序过程的程序. I've made this ap ...
- Sharing A Powerful Tool For Calculate Code Lines
最近正好需要统计下某项目代码行数,然后就找代码行数统计工具.以前找到过一个正则表达式,但是只有在VS2010下有用,VS2012和VS2013下的统计就不好使了. 接着搜索了一下代码行数统计绿色工具免 ...
- Outlook HTML渲染引擎
OutLook始终不离不弃 是不是很讨厌为Email代码兼容Outlook? 太遗憾了!虽然光都有尽头,但Outlook始终存在. 为了应付Email的怪癖,我们花了很多时间测试,确保我们搞定了所有O ...
- JSON Web Token实际应用
一.JWT认证方式的实现方式 1.客户端不需要持有密钥,由服务端通过密钥生成Token. 2.客户端登录时通过账号和密码到服务端进行认证,认证通过后,服务端通过持有的密钥生成Token,Token中一 ...