很久没记笔记了，最近搞起web开发了

<html>

<head>

    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

   <script type="text/javascript">

                function insertcode() {

                    var $body = $("body");

                    $body.append('<div style=\" height:1000px; font-size:24px;\">新增项目</div>')

                    $("#page_tag_load").hide();

                }

                $(document).ready(function () {

                    $(window).scroll(function () {

                        var $body = $("body");

                        var $html = "";

                        $html += "<br/>" + ($(window).height() + $(window).scrollTop());

                        $html += "<br/>window.height: " + $(window).height();

                        $html += "<br/>body.height: " + $body.height();

                        $html += "<br/>window.scrollTop: " + $(window).scrollTop();

                        $("#page_tag_bottom").html($html);

                        /*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/

                        if (($(window).height() + $(window).scrollTop()) >= $body.height()) {

                            $("#page_tag_load").show();

                            //setTimeout(insertcode, 1000);/*IE 不支持*/

                            insertcode();

                        }

                    });

                });

    </script>

</head>

<body>

    <div style=" height:1000px; font-size:24px;">新增项目</div>

    <div id="page_tag_bottom" style=" width:100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>

    <div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>

</body>

</html>

以上代码根据滚动条位置触发一个insertcode(),函数，这个函数可以用ajax，获取服务器接口数据，然后重绘dom

js 根据滚动条加载数据的更多相关文章

  1. vue 中监测滚动条加载数据（懒加载数据）

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  2. Vue.js中滚动条加载更多数据

    本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...

  3. jquery滚动条加载数据

    //滚动条  $(window).scroll(function () {   var scrollTop = $(this).scrollTop();   var scrollHeight = $( ...

  4. js滚动异步加载数据的思路

    <body> <div style="width:200px; height:1000px; border:1px solid red;" id="to ...

  5. Highcharts 异步加载数据曲线图表

    导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...

  6. Highcharts 基本曲线图；Highcharts 带有数据标签曲线图表；Highcharts 异步加载数据曲线图表

    Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...

  7. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  8. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  9. js实现滚动条来动态加载数据

    主要angular2+es6 data:Array<any> //展示的数据 allData:Array<any> //全部的数据 size:number = 10 //每次动 ...

随机推荐

  1. shell 脚本总结

    一.SHELL脚本是什么?它是必需的吗? 一个SHELL脚本就是一个文本文件,它包含一个或多个命令.系统管理员会经常需要使用多个命令来完成一项任务,此时可以添加这些所有命令在一个文本文件(SHELL脚 ...

  2. Qt布局

    常用的布局方法 1. 水平布局类 QHBoxLayout 2. 垂直布局类 QVBoxLayout 3. 网格布局类 QGridLayout QHBoxLayout 对象横向排列开 QVBoxLayo ...

  3. 从客户发送http请求到服务器返回http之间发生了什么

    由于我知识有限,可能会有模糊或者错误的地方,欢迎讨论与指正. 1.浏览器发出http请求 当用户访问一个url时,浏览器便会开始生成一个http请求. 首先获取http请求中所需要的参数,如url,c ...

  4. centos7 安装jdk及mysql8

    安装jdk 1.上传压缩包:通过SSH上传jdk压缩包,比如上传至/usr/local/java目录下 2.解压压缩包:利用命令解压压缩包 tar -zxvf  jdk-11.0.5_linux-x6 ...

  5. JAVA 多线程（一）

    进程和线程 进程:是一个正在执行中的程序.每一个进程执行都有一个执行顺序,该执行顺序是一个执行路径,或者叫一个控制单元. 线程:就是进程中的一个独立的控制单元. 线程在控制着进程的执行. 在计算机中多 ...

  6. Linux命令——lsb_release

    简介 LSB是Linux Standard Base(Linux标准库)的缩写, lsb_release命令 用来与具体Linux发行版相关的Linux标准库信息. 注:LSB的译法有Linux标准库 ...

  7. STM32复位及通过函数判断是何种条件出发的复位

    STM32F10xxx支持三种复位形式,分别为系统复位.上电复位和备份区域复位. 一.系统复位: 系统复位将复位所有寄存器至它们的复位状态. 当发生以下任一事件时,产生一个系统复位: 1. NRST引 ...

  8. 如何写好demo——学习感悟

    文章标题:教你如何写好Demo应用 如何制作出最有用的demo呢? 简,易 在demo中,我们要专注于单一的主题.我们的教学覆盖了很大的知识范围,因此,化整为零是非常必要的. 例如,我们要说明Andr ...

  9. artDialog提示框

    API网址 http://aui.github.io/artDialog/doc/index.html 相关资料下载 https://code.google.com/archive/p/artdial ...

  10. python学习之正则表达式,StringIO模块,异常处理,搭建测试环境

    python正则表达式 引入一个强大的匹配功能来匹配字符串 import re 正则表达式的表示类型raw string类型(原生字符串类型) r'sa\\/sad/asd'用r转为raw strin ...