由于网页的执行都是单线程的，在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修炼之道》

JS实现无限分页加载——原理图解的更多相关文章

  1. js实现图片懒加载原理

    原理 图片懒加载是前端页面优化的一种方式,在页面中有很多图片的时候,图片加载就需要很多时间,很耗费服务器性能,不仅影响渲染速度还会浪费带宽,为了解决这个问题,提高用户体验,所以就出现了懒加载这种方式来 ...

  2. packages/wepy-web/src/wx.js 分析storage 的加载原理 wx.getStorage(OBJECT)

    是小程序实例化后 读入内存 还是每次调用从文件系统读取 https://github.com/Tencent/wepy/blob/bd0003dca2bfb9581134e1b05d4aa1d80fc ...

  3. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  4. AMD-require.js模块加载原理

    项目中使用大了require.js,功能实现,现重新学习下模块加载原理相关知识,借鉴如下博文:https://blog.csdn.net/ai52011/article/details/7711361 ...

  5. Node.js require 模块加载原理 All In One

    Node.js require 模块加载原理 All In One require 加载模块,搜索路径 "use strict"; /** * * @author xgqfrms ...

  6. [转]微信小程序之加载更多（分页加载）实例 —— 微信小程序实战系列（2）

    本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后 ...

  7. PHP+InfiniteScroll实现网页无限滚动加载数据实例

    PHP+InfiniteScroll实现网页无限滚动加载数据实例,实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标 ...

  8. java攻城狮之路(Android篇)--widget_webview_metadata_popupwindow_tabhost_分页加载数据_菜单

    一.widget:桌面小控件1 写一个类extends AppWidgetProvider 2 在清单文件件中注册: <receiver android:name=".ExampleA ...

  9. 【转】JS判断SWF,JPG加载完毕、兼容（Activex,plugIn）所有浏览器

    JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器 这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏 ...

随机推荐

  1. ajax实现手机获取验证码

    <script type="text/javascript"> var InterValObj; //timer变量,控制时间 var count = 60; //间隔 ...

  2. JSON与JAVA数据的转换

      1. List集合转换成json代码 List list = new ArrayList(); list.add( "first" ); list.add( "sec ...

  3. 移动端字体缩放问题解决方案-摘自《html5移动web开发实践》

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. Android上dip、dp、px、sp等单位说明(转)

    dip  device independent pixels(设备独立像素). 不同设备不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖像素. 在 ...

  5. .Net Webconfig连接字符串中数据库实例名带'\'的问题

    获取前: 获取后: 导致sa登录失败的问题 string strCon = "workstation id=localhost;packet size=4096;user id=" ...

  6. 算法入门笔记------------Day1

    1.C语言使用%d显示float值,不会把float值转换为近似的int值,而是显示垃圾值,使用%f显示int值,也不会把该int值转换为浮点值 2.三位数反转:输入一个三位数,分离它的百位,十位和个 ...

  7. java内部类以及异常处理

    框架图 内部类 将一个类定义在另一个类的里面,里面那个类就称为内部类(也叫内置类或嵌套类). 内部类的访问规则:1.内部类可以直接访问外部类中的成员,包括私有成员.    之所以可以直接访问外部类中的 ...

  8. Python学习笔记1——Python基础

    一． 数据类型和变量 整数:十六进制用0x前缀和0-9,a-f表示 浮点数:小数,科学计数法:10用e代替:整数和浮点数在计算机内部存储的方式是不同的,整数运算永远是精确的(包括除法),浮点数运算则可 ...

  9. 在浏览器的JavaScript里new Date().toUTCString()后，传递给C# DateTime().TryParse()会发生什么？

    Format 1. Sun, 09 Oct 2016 13:24:35 GMT Format 2. Sun, 9 Oct 2016 13:36:09 UTC Format 1 是在IE里面产生的(Wi ...

  10. JAVA学习博客---2015-6

    JAVA核心技术卷一第一遍看得差不多了,应该是五月初开始看的,用了两个月的中午时间看完的,一共七百多页,接下来还是需要再看一遍,不懂的还是有很多. JAVA和C++一样是面向对象OOP的语言,不同于命 ...