<body>

<div style="width:200px; height:1000px; border:1px solid red;" id="top_div"></div>

<script>

 window.onscroll = function(){

    var t = document.documentElement.scrollTop || document.body.scrollTop; //滚动条滚动的长度

    var height=document.body.scrollHeight - window.screen.availHeight;  //网页页面整体高度  -  浏览器可见区域高度

    if( t >= height ) {

        //在此ajax异步加载数据显示
        alert(height);

        $("div").last().after("<div style='width:200px; height:50px;'>"+Date.now()+"</div>");

    }

} 

</script>

</body>

　　

js滚动异步加载数据的思路的更多相关文章

  1. Ajax 滚动异步加载数据

    第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...

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

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

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

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

  4. 新手教程：不写JS，在MIP页中实现异步加载数据

    从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...

  5. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  6. iScroll.js 向上滑动异步加载数据回弹问题

    iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...

  7. 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案

    关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...

  8. highcharts.js两种数据绑定方式和异步加载数据的使用

    一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...

  9. [Ext.Net]TreePanel 异步加载数据

    异步加载数据指的是页面加载的时候只显示根目录,点击根目录再去加载其子目录. 下面就来介绍下这种异步加载的树结构要怎么实现 现将例子的图 QQ图片20131225134353.jpg (12.1 KB, ...

随机推荐

  1. React with webpack

    //entry.js require("!style!css!./style.css"); require("./hello.jsx"); // documen ...

  2. 20155217 实验二 Java面向对象程序设计 实验报告

    20155217 实验二 Java面向对象程序设计 实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模 ...

  3. 20155325 实验三 敏捷开发与XP实践

    实验三 敏捷开发与XP实践-1 http://www.cnblogs.com/rocedu/p/4795776.html, Eclipse的内容替换成IDEA 在IDEA中使用工具(Code-> ...

  4. 20155327 学习基础和C语言基础调查

    20155327 学习基础和C语言基础调查 通过阅读老师推荐的五篇文章之后,其中有几个点引发了我的思考,便是"量变引起质变""循序渐进"以及"坚持&q ...

  5. BZOJ2039_employ人员雇佣_KEY

    题目传送门 网络流,求最小割. 设tot为所有盈利的和,即所有人(不花钱)雇佣. 对于S->i建一条容量为c[i]的边,i->j建一条S[i][j]*2的边,之所以这样建是因为如果不选这个 ...

  6. centos7.5yum安装mysql(官方yum源比较慢)

    mysql的部署 查看Linux发行版本 cat /etc/redhat-release 下载MySQL官方的Yum Repository wget -i http://dev.mysql.com/g ...

  7. 【LG1445】樱花

    [LG1445]樱花 题面 洛谷 题解 \[ \frac 1x+\frac 1y=\frac 1{n!}\\ \frac{x+y}{xy}=\frac 1{n!}\\ n!(x+y)=xy\\ xy- ...

  8. C#反射的简单示例

    反射(Reflection)可以在运行时获 得.NET中每一个类型(包括类.结构.委托.接口和枚举等)的成员,包括方法.属性.事件,以及构造函数等.还可以获得每个成员的名称.限定符和参数等反正说白了就 ...

  9. 「Leetcode」14. Longest Common Prefix（Java）

    分析 与其说是算法题,不如说是语言特性题. 这题要是对Java的String相关函数掌握的比较熟练,写起来的速度(各种意义上)就会很快. 大致的思路都是一致的,差不到哪里去,无非是枚举长度.值得一提的 ...

  10. Intellij IDEA破解激活

    本文使用破解补丁激活Intellij IDEA 第一步:下载破解补丁(http://idea.lanyus.com/) 第二步:将下载好的补丁放置磁盘的任意位置,下面是我放置的位置 第三步:打开Int ...