很久没记笔记了，最近搞起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. DeepID_V2解读

    港中文汤晓鸥团队在DeepID_v1基础上提出的新版本架构,发表于NIPS2014 一.Architecture 网络架构基本上与DeepId_v1一致. 二.Pipeline 图片被分成20regi ...

  2. 如何理解H264 编码

    H264 结构 https://blog.csdn.net/andywang201001/article/details/80274886 H264 源码  https://www.cnblogs.c ...

  3. wepy框架 怎么在template模板中使用函数

    呵呵.介绍说是类似vue,用起来真累人,就想在模板中使用个函数都要查N久的文档才知道. 具体要怎么操作呢? 要先创建个wxs脚本文件,在里面定义函数或其它的,然后在页面或组件中引入这文件,就可以在模板 ...

  4. TCP与UDP协议必知必会

    TCP协议 一个工作在传输层的传输控制协议,面向连接.可靠的流式协议,HTTP协议建立在TCP基础上.每个TCP报文,实际在网络层进行封装成IP数据报,会进行IP分片(受限于MTU). 头部(20字节 ...

  5. springcloud 之Ribbon客户端负载均衡配置使用

    pom.xml添加配置说明:这里服务注册与发现用的是Eureka,所以消费者端需要引入eureka,使用EurekaClient来调用服务 <dependency> <groupId ...

  6. GitLab初识以及代码迁移

    目录 一.理论概述 1.什么是gitlib 2.GitLab服务构成 3.Git对比SVN 二.部署 1.简单操作GitLab 三.项目实践:SVN代码迁移至GitLab 环境 1.Linux下部署S ...

  7. 支付宝手机网站支付(基于Java实现支付宝手机网站支付)

    支付宝支付核心需要的参数是(APPID,PRIVATE_KEY,ALIPAY_PUBLIC_KEY) APPID:创建应用后就有的APPID. PRIVATE_KEY:应用私钥 ALIPAY_PUBL ...

  8. await在forEach不起作用解决【await is a reserved word】

    原文链接:https://blog.csdn.net/ssbb1995/article/details/82084800 1.await 只能在 async中使用,如: async function ...

  9. Windows下静态库的制作与使用

    参考 静态链接 VS 动态链接 静态库 VS 动态库 实验环境 OS:Windows10 企业版 IDE:Visual Studio 2017旗舰版 前言 静态链接库与动态链接库都是共享代码的方式,如 ...

  10. 2. kafka

    目录: 1.kafka概念 2.kafka使用场景 3.相关术语 4.原理解析 5.项目实战 一. kafka是什么 https://www.jianshu.com/p/014af2b34159 Ka ...