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

  1. <html>
  2. <head>
  3.     <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
  4.    <script type="text/javascript">
  5.                 function insertcode() {
  6.                     var $body = $("body");
  7.                     $body.append('<div style=\" height:1000px; font-size:24px;\">新增项目</div>')
  8.                     $("#page_tag_load").hide();
  9.                 }
  10.                 $(document).ready(function () {
  11.                     $(window).scroll(function () {
  12.                         var $body = $("body");
  13.                         var $html = "";
  14.                         $html += "<br/>" + ($(window).height() + $(window).scrollTop());
  15.                         $html += "<br/>window.height: " + $(window).height();
  16.                         $html += "<br/>body.height: " + $body.height();
  17.                         $html += "<br/>window.scrollTop: " + $(window).scrollTop();
  18.                         $("#page_tag_bottom").html($html);
  19.                         /*判断窗体高度与竖向滚动位移大小相加 是否 超过内容页高度*/
  20.                         if (($(window).height() + $(window).scrollTop()) >= $body.height()) {
  21.                             $("#page_tag_load").show();
  22.                             //setTimeout(insertcode, 1000);/*IE 不支持*/
  23.                             insertcode();
  24.                         }
  25.                     });
  26.                 });
  27.     </script>
  28. </head>
  29. <body>
  30.     <div style=" height:1000px; font-size:24px;">新增项目</div>
  31.     <div id="page_tag_bottom" style=" width:100%; position:fixed; top:0px; background-color:#cccccc;height:100px;"></div>
  32.     <div id="page_tag_load" style=" display:none; font-size:14px;position:fixed; bottom:0px; background-color:#cccccc;height:50px;">加载中...</div>
  33. </body>
  34. </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. 解决在web.xml中配置server服务器启动失败问题

    一.问题"Server Tomacat v8.5 Server at locallhost failed to start" 二.解决方法:删除注释@webServlet 三.分析 ...

  2. 安卓开发之cache 的使用（图片查看器案例）

    package com.lidaochen.test; import android.graphics.Bitmap; import android.graphics.BitmapFactory; i ...

  3. jdk代理与cglib代理

    1. jdk静态代理 jdk静态代理主要使用硬编码实现.他通过对在代理类中持有委托类的引用,来打到在委托类方法执行前和执行后进行处理,实现简单,容易理解. 代码如下: 1.业务逻辑接口 package ...

  4. 【前端开发】nrm切换淘宝镜像&nvm管理node版本及切换

    说明:nrm是切换淘宝镜像用的,nvm是node的版本切换用的(可在自己电脑安装多个版本node,便于不同项目的支持) 一.nrm的安装及常见命令: 安装nrmnpm install -g nrm 查 ...

  5. csdr Makefile for openwrt（纯粹笔记，暂未成功）

    1.自已学着写的Makefile给csdr在openwrt平台上使用 参照:https://blog.csdn.net/lvshaorong/article/details/54668220 incl ...

  6. python自定义ORM并操作数据库

    看这个代码之前先去看上篇文章,理解type的用法及元类的含义: ORM可以代替pymysql,实现将python语义装换为sql语句,简单化 import pymysql ''' metaclass, ...

  7. VSCode安装程序——java开发

    文章:微软为 Java 开发者推出 VSCode 安装程序 文章介绍微软为VSCode提供了开发程序,方便java开发者更好的使用VSCode

  8. linux网络编程之posix线程(一)

    今天继续学习posix IPC相关的东东,消息队列和共享内存已经学习过,接下来学习线程相关的知识,下面开始: [注意]:创建失败这时会返回错误码,而通常函数创建失败都会返回-1,然后错误码会保存在er ...

  9. linux网络编程之system v共享内存

    接着上次的共享内存继续学习,这次主要是学习system v共享内存的使用,下面继续: 跟消息队列一样,共享内存也是有自己的数据结构的,system v共享内存也是随内核持续的,也就是说当最后一个访问内 ...

  10. pypython解构

    *******重点 解构:把线性结构的元素解开,并按顺序的赋给其他变量 左边接纳的要与右边解开的个数一致. lst = [3,5] first,second = lst print(first,sec ...