JS实现-页面数据无限加载
2016-09-13 00:45
525 查看
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果:
当滚动条滚动到页面底部时,提示“正在加载…”。
当页面已经加载了所有数据后,滚动到页面底部会提示“数据已加载到底了”:
实现数据无限加载的过程大致如下:
1.滚动条滚动到页面底部。
2.触发ajax加载,把请求返回的数据加载到列表后面。
如何判断滚动条是否滚动到页面底部?我们可以设置一个规则:当滚动条的滚动高度和整个文档高度相差不到20像素,则认为滚动条滚动到页面底部了:
文档高度 - 视口高度 - 滚动条滚动高度 < 20
要通过代码实现这样的判断,我们必须要了解上面的这些高度通过哪些代码获取?可以参考我之前写的一篇“HTML元素坐标定位,这些知识点得掌握”。
上面的判断,我封装了一个方法:
判断有了,我们就可以开启一个定时器,900毫秒监测一次,如果isScrollToPageBottom()返回true则调用ajax请求数据,如果返回false则通过900毫秒之后再监测。
下面是核心代码实现:
demo中ajax请求我是通过jquery-mockjax模拟的数据。代码如下:
整个完整的demo我已上传到github上:
https://github.com/heavis/pageLoader
在线演示:
https://heavis.github.io/pageLoader/index.html
如果本篇内容对大家有帮助,请点击页面右下角的关注。如果觉得不好,也欢迎拍砖。你们的评价就是博主的动力!下篇内容,敬请期待!
当滚动条滚动到页面底部时,提示“正在加载…”。
当页面已经加载了所有数据后,滚动到页面底部会提示“数据已加载到底了”:
实现数据无限加载的过程大致如下:
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实现页面数据无限加载
- JS实现-页面数据无限加载
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- js实现滚动到页面底端加载下一页数据
- js + jquery 实现无限加载页面的分页(类似京东手机版)
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- js加载Json数组实现ajax加载动态页面数据
- BlocksIt.js瀑布流插件结合ajax实现无限加载数据
- javascript实现页面加载,预读取完数据后再显示页面
- dwr 实现页面数据加载等待状态
- 用js判断页面是否加载完成实现代码
- 基于jquery的finkyUI插件与Ajax实现页面数据加载功能
- JS+AS实现真正页面加载图片进度条(带百分比)
- 让页面中的js实现同步加载
- 用于实现EXT单页面的动态js加载.(修复版)
- 一段实现页面上的图片延时加载的js
- 如何为复杂页面实现过渡页面 [数据加载中]【陈希章】
- [转]iframe自适应加载页面高度-js实现
- javascript实现页面加载,预读取完数据后再显示页面