由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。传统的数据展现都以分页的形式，但是分页的效果并不好，需要用户手动点击下一页，才能看到更多的内容。

有很多网站使用 无限分页 的模式，即网页视窗到达内容底部就自动加载下一部分的内容...

本篇就无限分页的实现模型，讲述其中奥妙。

原理图

实现无限分页的过程大致如下：

1 视窗滚动到底部

2 触发加载，添加到现有内容的后面。

因此，可能会出现两种情况：

1 当页面的内容很少，没有出现滚动条。

2 当页面的内容很多，出现了滚动条。

针对这两种情况，需要理解几个概念：

scrollHeight即真实内容的高度；

clientHeight比较好理解，是视窗的高度，就是我们在浏览器中所能看到内容的高度；

scrollTop是视窗上面隐藏掉的部分。

实现的思路：

1 如果真实的内容比视窗高度小，则一直加载到超过视窗

2 如果超过了视窗，则判断下面隐藏的部分的距离是否小于一定的值，如果是，则触发加载。（即滚动到了底部）

代码样例

代码部分没有太多的内容，需要注意的是：

1 使用fixed定位加载框

2 使用setTimeout定时触发判断方法，频率可以自定义

3 通过 真实内容高度 - 视窗高度 - 上面隐藏的高度 < 20，作为加载的触发条件

<!DOCTYPE html>

<html>

<head>

    <title>无限翻页测试</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style type="text/css">

    #spinner{

        position: fixed;

        top: 20px;

        left: 40%;

        display: block;

        color: red;

        font-weight: 900;

        background-color: rgba(80, 80, 90, 0.22);

        padding-top: 20px;

        padding-bottom: 20px;

        padding-left: 100px;

        padding-right: 100px;

        border-radius: 15px;

    }

    </style>

</head>

<body>

    <div id="sample">

    </div>

    <div id="spinner">

        正在加载

    </div>

    <script type="text/javascript">

        var index = 0;

        function lowEnough(){

            var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);

            var viewportHeight = window.innerHeight ||

                document.documentElement.clientHeight ||

                document.body.clientHeight || 0;

            var scrollHeight = window.pageYOffset ||

                document.documentElement.scrollTop ||

                document.body.scrollTop || 0;

            // console.log(pageHeight);

            // console.log(viewportHeight);

            // console.log(scrollHeight);

            return pageHeight - viewportHeight - scrollHeight < 20;

        }

        function doSomething(){

            var htmlStr = "";

            for(var i=0;i<10;i++){

                htmlStr += "这是第"+index+"次加载<br>";

            }

            $('#sample').append(htmlStr);

            index++;

            pollScroll();//继续循环

            $('#spinner').hide();

        }

        function checkScroll(){

            if(!lowEnough()) return pollScroll();

            $('#spinner').show();

            setTimeout(doSomething,900);

        }

        function pollScroll(){

            setTimeout(checkScroll,1000);

        }

        checkScroll();

    </script>

</body>

</html>

代码的运行结果以及视窗高度验证

最开始没有滚动滚动条时，上面隐藏的部分为0，视窗的高度是667（这个值是一直不变的），内容的高度为916

当向下滚动了一下后，视窗的高度不变；上面隐藏的高度增加到100，即滚动条上面代表的部分。

当触发加载后，视窗的高度保持变；上面隐藏的高度保持不变；文本的内容增加到1816；

参考

【1】height、clientHeight、scrollHeight、offsetHeight区别

【2】ScrollHeight、OffsetHeight、ClientHeight

【3】CSS position 属性

【4】《JS修炼之道》

无限分页//////////////zz的更多相关文章

  1. JS实现无限分页加载——原理图解

    由于网页的执行都是单线程的,在JS执行的过程中,页面会呈现阻塞状态.因此,如果JS处理的数据量过大,过程复杂,可能会造成页面的卡顿.传统的数据展现都以分页的形式,但是分页的效果并不好,需要用户手动点击 ...

  2. Infinite Scroll–无限分页

    一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...

  3. Google搜索为什么不能无限分页？

    这是一个很有意思却很少有人注意的问题. 当我用Google搜索MySQL这个关键词的时候,Google只提供了13页的搜索结果,我通过修改url的分页参数试图搜索第14页数据,结果出现了以下的错误提示 ...

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

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

  5. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  6. ios项目里扒出来的json文件

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #000000 } p.p2 { margin: 0.0px 0. ...

  7. Github上关于iOS的各种开源项目集合（强烈建议大家收藏，查看，总有一款你需要）

    下拉刷新 EGOTableViewPullRefresh - 最早的下拉刷新控件. SVPullToRefresh - 下拉刷新控件. MJRefresh - 仅需一行代码就可以为UITableVie ...

  8. iOS - 开发类库

    开发类库   UI 项目名称 项目信息 1.MJRefresh 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能.可以自定义上下拉刷新的文字说明. ...

  9. iOS及Mac开源项目和学习资料【超级全面】

    UI 下拉刷新 EGOTableViewPullRefresh – 最早的下拉刷新控件. SVPullToRefresh – 下拉刷新控件. MJRefresh – 仅需一行代码就可以为UITable ...

随机推荐

  1. 转：【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  2. JS：callee属性

    函数内部属性:在函数内部,有两个特殊的对象:arguments和this. arguments有一个callee属性,该属性是一个指针,指向拥有这个arguments对象的函数. function f ...

  3. 【Eclipse】 Eclipse 中JPEGEncodeParam 错误波浪线问题

    [异常信息] Description Resource Path Location Type Access restriction: The method encode(BufferedImage, ...

  4. 摘要: Linux下which、whereis、locate、find命令的区别

    我们经常在linux要查找某个文件,但不知道放在哪里了,可以使用下面的一些命令来搜索.这些是从网上找到的资料,因为有时很长时间不会用到,当要用的时候经常弄混了,所以放到这里方便使用. which    ...

  5. odoo 中X2many类型的视图继承

    我们知道视图的继承可以使用inherit_id,但是对于诸如one2many类型的字段,如何利用xpath继承修改其视图呢? 问题:如果直接写one2many类型的字段,会报不存在该字段的错误: 原视 ...

  6. Matlab的标记分水岭分割算法

    1 综述 Separating touching objects in an image is one of the more difficult image processing operation ...

  7. 【RabbitMQ】HelloWorld

    初识RabbitMQ RabbitMQ是一个消息代理人.它的主要目的很简单:接受并推送消息.我们可以将它理解为一个邮局:当你邮寄一封邮件到邮箱里,可以非常确定邮递员会将它送到收件人手中.打这种比方来将 ...

  8. tjkd-html

    <div class="result-item"> <div class="kd-item"> <div class=" ...

  9. sqlite在火狐中安装及使用

    1.SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前已经在很多嵌入 ...

  10. Qt在pro文件中加入带空格的路径（使用$$quote关键字）

    LIBS += -L$$quote(C:\Program Files (x86)\Microsoft SDKs\Windows\v7.1A\Lib) INCLUDEPATH += $$quote(C: ...