由于网页的执行都是单线程的,在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. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

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

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

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

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

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

  4. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

  5. iOS 下拉刷新-上拉加载原理

    前言 讲下拉刷新及上拉加载之前先给大家解释UIScrollView的几个属性 contentSize是UIScrollView可以滚动的区域. contentOfinset 苹果官方文档的解释是&qu ...

  6. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  7. Js控制iFrame切换加载网址

    <html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> & ...

  8. 老调重弹:JDBC系列之&lt;驱动加载原理全面解析) ----转

      最近在研究Mybatis框架,由于该框架基于JDBC,想要很好地理解和学习Mybatis,必须要对JDBC有较深入的了解.所以便把JDBC 这个东东翻出来,好好总结一番,作为自己的笔记,也是给读者 ...

  9. nginx设置反向代理后,页面上的js css文件无法加载

    问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...

随机推荐

  1. 定向爬虫 - Python模拟新浪微博登录

    当我们试图从新浪微博抓取数据时,我们会发现网页上提示未登录,无法查看其他用户的信息. 模拟登录是定向爬虫制作中一个必须克服的问题,只有这样才能爬取到更多的内容. 实现微博登录的方法有很多,一般我们在模 ...

  2. 83 parrted-分区和分区大小的调整

    parted命令是由GNU组织开发的一款功能强大的磁盘分区和分区大小调整工具,与fdisk不同,它支持调整分区的大小.作为一种设计用于Linux的工具,它没有构建成处理与fdisk关联的多种分区类型, ...

  3. List去重复(不是最简单,但绝对是最易理解)

    for (int i = 0; i < courselist.size(); i++) //外循环是循环的次数 { for (int j = courselist.size() - 1 ; j ...

  4. Memento(备忘录)-对象行为型模式

    1.意图 在布破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可以将对象恢复到原先保存的状态. 2.别名 Token 3.动机 为了允许用户取消不确定的操作或从错误中 ...

  5. mysql 将指定列的浮点数转化为整数

    mysql 将指定列的浮点数转化为整数: update A set B =  cast(B as decimal(10,0))  -- 或者 update A set B = round(B,0) 例 ...

  6. 简易qq对话框

    //本程序由QT5 creator编译可运行 //dialog.h 1 #ifndef DIALOG_H #define DIALOG_H #include <QDialog> class ...

  7. QMessageBox

    #include "dialog.h" #include "ui_dialog.h" #include<QMessageBox> Dialog::D ...

  8. IO 输入流操作

    //get.h #ifndef GET_H #define GET_H #include <iostream> std::istream& get(std::istream& ...

  9. HDU 1698

    成段更新 这是一种把 num[]上空结点当做lazy标志使用的方法 都一样... #include <stdio.h> #include <string.h> #include ...

  10. 12-28 显示团购数据界面的搭建,cell的自定义方面的知识总结

    1.通过plist加载模型数据 2.controller中懒加载数据 3.设置tableView的数据源 4.写数据源的方法 5.观察演示项目,分析通过默认的cell的4种现实方式,无法实现要想要的现 ...