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

    天气预报API开发 一.        寻觅篇 最近想要跟着视频练习一下利用API开发一个天气预报系统,就在网上找了一下可以用的API,结果好多都已经失效了... 1.       百度车联网天气预报 ...

  2. .NET支持多平台后的一点拙见

    我们目前对.NET的理解大部分可以归纳为:起初它是Java平台(注意是平台,不要跟Java语言搞混淆)的一个克隆品,后来慢慢演变,有了自己的特性.由于Java平台最显著的特点就是“平台独立性”(或者说 ...

  3. 【Paddy】如何将物理表分割成动态数据表与静态数据表

    前言 一般来说,物理表的增.删.改.查都受到数据量的制约,进而影响了性能. 很多情况下,你所负责的业务关键表中,每日变动的数据库与不变动的数据量比较,相差非常大. 这里我们将变动的数据称为动态数据,不 ...

  4. Android 透明度百分比对应的 十六进制

    Android 透明度百分比对应的 十六进制 先把结果放在这里,方便大家查询,也方便自己,UI太喜欢用百分比表示了=.=! 透明度百分比对应的十六进制: (说明:百分比计算出来会有小数,按照常规的四舍 ...

  5. java compiler level does not match the version of the installed java project facet 解决方案

    项目出现 java compiler level does not match the version of the installed java project facet 错误,一般是项目移植出现 ...

  6. 将数据从MySQL迁移到Oracle的注意事项

    将数据从MySQL迁移到Oracle的注意事项1．自动增长的数据类型处理MYSQL有自动增长的数据类型,插入记录时不用操作此字段,会自动获得数据值.ORACLE没有自动增长的数据类型,需要建立一个自动 ...

  7. 用SQL语句创建四个表并完成相关题目-10月18日更新

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. 2. 查询教师所有的单位即不重复的Depart列. 3. 查询Student表的所有记录. 4. 查询Score表中成绩在 ...

  8. 【Win10 应用开发】扫描和连接Wi-fi网络

    老周今天带大家去“扫雷”了,别当真,是扫描并连接指定无线网络,时尚一点叫Wi-fi. 所以,今天的任务要求你的设备至少有1张无线网卡,目前老周没看到过有N张无线网卡的设备.像笔记本.平板等设备都可以, ...

  9. Windows phone 全景视图

    Windows phone 全景视图下为了实现可以上下滑动需要使用listbox. 需要的布局什么的,在listbox中填写 <ListBox Name="ListBox_new&qu ...

  10. px、dp与sp的区别以及换算

    1.px 即像素,1px代表屏幕上的一个物理像素点. 2.dp dip:device independent pixels(设备独立像素),dp与dip一样,不同的设备有不同的显示效果,一般为了支持W ...