在手机端浏览网页时，经常使用一个功能，当我们浏览京东或者淘宝时，页面滑动到底部，我们看到数据自动加载到列表。之前并不知道这些功能是怎么实现的，于是自己在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实现-页面数据无限加载的更多相关文章

  1. js实现移动端无限加载分页

    原理:当滚动条到达底部时,执行下一页内容. 判断条件需要理解三个概念:    1.scrollHeight 真实内容的高度    2.clientHeight 视窗的高度,即在浏览器中所能看到的内容的 ...

  2. js刷新页面得重新加载和页面的刷新

    1.reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当 ...

  3. Vue.js 开发实践：实现精巧的无限加载与分页功能

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js ...

  4. 支持无限加载的js图片画廊插件

    natural-gallery-js是一款支持无限加载的js图片画廊插件.该js图片画廊支持图片的懒加载,可以对图片进行搜索,分类,还可以以轮播图的方式来展示和切换图片. 使用方法 在页面中引入下面的 ...

  5. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  6. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件

    为不同分辨率单独做样式文件,在页面头部用js判断分辨率后动态加载定义好的样式文件.样式文件命名格式如:forms[_屏幕宽度].css,样式文件中只需重新定义文本框和下拉框的宽度即可. 在包含的头文件 ...

  7. 在页面所有元素加载完成之后执行某个js函数

    在页面所有元素加载完成之后执行某个js函数 http://lgscofield.iteye.com/blog/1884352

  8. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  9. JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)

    //平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...

随机推荐

  1. CDN解决方案

    帝联cdn 这算不算是打广告呢?

  2. matlab 中 eps 的分析

    eps(a)是|a|与大于|a|的最小的浮点数之间的距离,距离越小表示精度越高.默认a=1: 这里直接在matlab中输入:eps == eps(1)(true). 我们知道浮点数其实是离散的,有限的 ...

  3. ENode框架Conference案例分析系列之 - 复杂情况的读库更新设计

    问题背景 Conference案例,是一个关于在线创建会议(类似QCon这种全球开发者大会).在线管理会议位置信息.在线预订某个会议的位置的,这样一个系统.具体可以看微软的这个项目的主页:http:/ ...

  4. Hadoop学习笔记—8.Combiner与自定义Combiner

    一.Combiner的出现背景 1.1 回顾Map阶段五大步骤 在第四篇博文<初识MapReduce>中,我们认识了MapReduce的八大步凑,其中在Map阶段总共五个步骤,如下图所示: ...

  5. C#中使用Socket请求Web服务器过程

    最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的.因此,浏览器访问Web服务器的过程必须先有“连接建立”的发生. 而有人或许会问: ...

  6. Docker+nginx+tomcat7配置简单的负载均衡

    本文为原创,原始地址为:http://www.cnblogs.com/fengzheng/p/4995513.html 本文介绍在Docker上配置简单的负载均衡,宿主机为Ubuntu 14.04.2 ...

  7. Azure Table storage 基本用法 -- Azure Storage 之 Table

    Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table,其中的 Table 就是本文的主角 Azure Tabl ...

  8. Spark使用实例

    1.介绍 Spark是基于Hadoop的大数据处理框架,相比较MapReduce,Spark对数据的处理是在本地内存中进行,中间数据不需要落地,因此速度有很大的提升.而MapReduce在map阶段和 ...

  9. 2013 duilib入门简明教程 -- 事件处理和消息响应 (17)

        界面的显示方面就都讲完啦,下面来介绍下控件的响应.     前面的教程只讲了按钮和Tab的响应,即在Notify函数里处理.其实duilib还提供了另外一种响应的方法,即消息映射DUI_BEG ...

  10. 【Win 10开发】协议-上篇：自定义应用协议

    就像系统许多内置应用可以通过URI来启动(如ms-settings-bluetooth:可以打开蓝牙设置页),我们自己开发的应用程序,如果需要的话,可以为应用程序自定义一个协议.应用程序协议在安装时会 ...