JS实现-页面数据无限加载

HTML5培训技术

　　在手机端浏览网页时，经常使用一个功能，当我们浏览京东或者淘宝时，页面滑动到底部，我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的，于是自己在PC浏览器上模拟实现这样的功能。先看看浏览效果：

　　当滚动条滚动到页面底部时，提示“正在加载…”。

　　当页面已经加载了所有数据后，滚动到页面底部会提示“数据已加载到底了”：

　　实现数据无限加载的过程大致如下：

　　1.滚动条滚动到页面底部。

　　2.触发ajax加载，把请求返回的数据加载到列表后面。

　　如何判断滚动条是否滚动到页面底部?我们可以设置一个规则：当滚动条的滚动高度和整个文档高度相差不到20像素，则认为滚动条滚动到页面底部了：

　　文档高度 - 视口高度 - 滚动条滚动高度 < 20

　　要通过代码实现这样的判断，我们必须要了解上面的这些高度通过哪些代码获取?可以参考我之前写的一篇“HTML元素坐标定位，这些知识点得掌握”。

　　上面的判断，我封装了一个方法：

	
		01
		//检测滚动条是否滚动到页面底部
		
		02
		    function isScrollToPageBottom(){
		
		03
		        //文档高度
		
		04
		        var documentHeight = document.documentElement.offsetHeight;
		
		05
		        var viewPortHeight = getViewportSize().h;
		
		06
		        var scrollHeight = window.pageYOffset ||
		
		07
		                document.documentElement.scrollTop ||
		
		08
		                document.body.scrollTop || 0;
		
		09
		 
		10
		        return documentHeight - viewPortHeight - scrollHeight < 20;
		
		11
		    }

　　判断有了，我们就可以开启一个定时器，900毫秒监测一次，如果isScrollToPageBottom()返回true则调用ajax请求数据，如果返回false则通过900毫秒之后再监测。

　　下面是核心代码实现：

	
		001
		<!DOCTYPE html>
		
		002
		<html lang="en">
		
		003
		<head>
		
		004
		    <meta charset="UTF-8">
		
		005
		    <title>无限分页</title>
		
		006
		    <link rel="stylesheet" href="assets/css/index.css"/>
		
		007
		</head>
		
		008
		<body>
		
		009
		<div class="l-page">
		
		010
		    <ul id="list" class="list">
		
		011
		    </ul>
		
		012
		</div>
		
		013
		<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
		
		014
		<script src="js/jquery.mockjax.js"></script>
		
		015
		<script type="text/javascript" src="js/dataMock.js"></script>
		
		016
		<script type="text/javascript">
		
		017
		    //作为一个对象的w和h属性返回视口的尺寸
		
		018
		    function getViewportSize(w){
		
		019
		        //使用指定的窗口， 如果不带参数则使用当前窗口
		
		020
		        w = w || window;
		
		021
		 
		022
		        //除了IE8及更早的版本以外，其他浏览器都能用
		
		023
		        if(w.innerWidth != null)
		
		024
		            return {w: w.innerWidth, h: w.innerHeight};
		
		025
		 
		026
		        //对标准模式下的IE（或任意浏览器）
		
		027
		        var d = w.document;
		
		028
		        if(document.compatMode == "CSS1Compat")
		
		029
		            return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};
		
		030
		 
		031
		        //对怪异模式下的浏览器
		
		032
		        return {w: d.body.clientWidth, h: d.body.clientHeight};
		
		033
		    }
		
		034
		 
		035
		    //检测滚动条是否滚动到页面底部
		
		036
		    function isScrollToPageBottom(){
		
		037
		        //文档高度
		
		038
		        var documentHeight = document.documentElement.offsetHeight;
		
		039
		        var viewPortHeight = getViewportSize().h;
		
		040
		        var scrollHeight = window.pageYOffset ||
		
		041
		                document.documentElement.scrollTop ||
		
		042
		                document.body.scrollTop || 0;
		
		043
		 
		044
		        return documentHeight - viewPortHeight - scrollHeight < 20;
		
		045
		    }
		
		046
		 
		047
		    //商品模板
		
		048
		    function getGoodsTemplate(goods){
		
		049
		        return "<li>" +
		
		050
		                "<div class='pic-wrap leftFloat'>" +
		
		051
		                "<img src='" + goods.pic + "'>" +
		
		052
		                "</div>" +
		
		053
		                "<div class='info-wrap leftFloat'>" +
		
		054
		                "<div class='info-name'><span>" + goods.name + "</span></div>" +
		
		055
		                "<div class='info-address'><span>" +　goods.address +"</span></div>" +
		
		056
		                "<div class='info-bottom'>" +
		
		057
		                "<div class='info-price leftFloat'><span>￥" + goods.price + "</span></div>" +
		
		058
		                "<div class='info-star leftFloat'><span>" + goods.star + "人推荐</span></div>" +
		
		059
		                "<div class='info-more leftFloat'><span>更多信息</span></div>" +
		
		060
		                "</div>" +
		
		061
		                "</div>" +
		
		062
		                "</li>";
		
		063
		    }
		
		064
		 
		065
		    //初始化的时候默给list加载100条数据
		
		066
		    $.ajax("http://localhost:8800/loadData?sessionId=" + (+ newDate)).done(function(result){
		
		067
		        if(result.status){
		
		068
		            var html = "";
		
		069
		            result.data.forEach(function(goods){
		
		070
		                html += getGoodsTemplate(goods);
		
		071
		            });
		
		072
		            $("#list").append(html);
		
		073
		        }
		
		074
		    });
		
		075
		 
		076
		 
		077
		    //加载数据
		
		078
		    function loadDataDynamic(){
		
		079
		        //先显示正在加载中
		
		080
		        if( $("#loadingLi").length === 0)
		
		081
		             $("#list").append("<li id='loadingLi' class='loading'>正在加载...</li>");
		
		082
		        else{
		
		083
		            $("#loadingLi").text("正在加载...").removeClass("space");
		
		084
		        }
		
		085
		        var loadingLi = document.getElementById("loadingLi");
		
		086
		        loadingLi.scrollIntoView();
		
		087
		        //加载数据,数据加载完成后需要移除加载提示
		
		088
		        var hasData = false, msg = "";
		
		089
		        $.ajax("http://localhost:8800/loadData?sessionId=" + (+ newDate)).done(function(result){
		
		090
		             if(result.status){
		
		091
		                if(result.data.length > 0){
		
		092
		                    hasData = true;
		
		093
		                    var html = "";
		
		094
		                    result.data.forEach(function(goods){
		
		095
		                        html += getGoodsTemplate(goods);
		
		096
		                    });
		
		097
		                    $("#list").append(html);
		
		098
		                }else{
		
		099
		                    msg = "数据已加载到底了"
		
		100
		                }
		
		101
		            }
		
		102
		             $("#list").append(loadingLi);
		
		103
		        }).fail(function(){
		
		104
		            msg = "数据加载失败!";
		
		105
		         }).always(function(){
		
		106
		            !hasData && setTimeout(function(){
		
		107
		                $(document.body).scrollTop(document.body.scrollTop -40);
		
		108
		            }, 500);
		
		109
		                msg && $("#loadingLi").text(msg);
		
		110
		            //重新监听滚动
		
		111
		            setTimeout(watchScroll, 900);
		
		112
		         });
		
		113
		    }
		
		114
		 
		115
		    //如果滚动条滚动到页面底部，需要加载新的数据,并且显示加载提示
		
		116
		    function watchScroll(){
		
		117
		        if(!isScrollToPageBottom()){
		
		118
		            setTimeout( arguments.callee, 900);
		
		119
		            return;            }
		
		120
		        loadDataDynamic();
		
		121
		    }
		
		122
		 
		123
		    //开始检测滚动条
		
		124
		    watchScroll();
		
		125
		</script>
		
		126
		</body>
		
		127
		</html>

　　demo中ajax请求我是通过jquery-mockjax模拟的数据。代码如下：

	
		01
		/**
		
		02
		 * 模拟接口.
		
		03
		 */
		
		04
		var i = 0, len = 200, addresses = ["四川", "北京", "上海", "广州", "深圳", "甘肃", "云南","浙江", "青海", "贵州"];
		
		05
		 
		06
		 
		07
		 
		08
		function getData(){
		
		09
		    var size = Math.min(i + 50, len), arr = [];
		
		10
		    for(; i < size; i++){
		
		11
		        arr.push({
		
		12
		            name: "苹果" + (i % 10 + 1),
		
		13
		            pic: "assets/images/iphone" + (i % 10 + 1) + ".jpg",
		
		14
		            price: parseInt(Math.random() * 10000),
		
		15
		            star: parseInt(Math.random() * 1000),
		
		16
		            address: addresses[i % 10]
		
		17
		        })
		
		18
		    }
		
		19
		 
		20
		    return arr;
		
		21
		}
		
		22
		 
		23
		$.mockjax({
		
		24
		    url: 'http://localhost:8800/loadData*',
		
		25
		    responseTime: 1000,
		
		26
		    response: function(settings){
		
		27
		        this.responseText = {
		
		28
		            status: true,
		
		29
		            data: getData()
		
		30
		        }
		
		31
		    }
		
		32
		});

南京HTML5课程

上一篇：5分种让你了解javascript异步编程的前世今生

下一篇：WebSocket使用初探(Tornado+Nginx)

HTML5培训技术

本文由欣才IT学院整理发布，未经许可，禁止转载。

支持2 不支持0

让更多人成为更优秀的互联网工程师

欣才学院微信公众号

欣才IT学院为小伙伴们提供专业PHP培训、python培训、java培训、HTML5培训让更多人成为更优秀的互联网工程师！期待您的到来！