<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. pyhton习题20190201

    #20190131'''检查ipV4的有效性,有效则返回True,否则返回False,(提示使用split函数进行分割)'''import osdef print_ping_ip(ip): s = o ...

  2. 3Dchart理解

    想在Flex Chart中为图例设置3D效果,近几天查找了些资料,动手做了个DEMO供大家参考!   DEMO演示地址http://xingjunli.webs.com/flash/flexChart ...

  3. 20155308 2016-2017-2《Java程序设计》课堂实践项目

    20155308 2016-2017-2<Java程序设计>课堂实践项目 在java.lang包中有String.split()方法,返回是一个数组 我在应用中用到一些,给大家总结一下,仅 ...

  4. OpenStack入门篇（一）之云计算的概念

    1.云计算 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这些资源能够被快速提供,只需投入很少 ...

  5. centos7.4 防火墙设置

    1.关闭默认的firewall防火墙 systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service ...

  6. Entity Framework for Oracle 基本配置

    1.需要安装ODAC 如果不安装ODAC,在数据源连接的配置中,看不到Oracle的选项 我下载安装的组件是32-bit Oracle Data Access Components (ODAC)  w ...

  7. Maven学习(三)-----Maven本地资源库

    Maven本地资源库 Maven的本地资源库是用来存储所有项目的依赖关系(插件jar和其他文件,这些文件被Maven下载)到本地文件夹.很简单,当你建立一个Maven项目,所有相关文件将被存储在你的M ...

  8. SQL Server 2008 R2 链接 Oracle 10g

    首先sqlserver 链接oracle可以通过两个访问接口: “MSDAORA” 和“OraOLEDB.Oracle” 1.“MSDAORA”访问接口是由Microsoft OLE DB Provi ...

  9. Eclipse 无法编译 或 提示“错误: 找不到或无法加载主类”

    project显示一个红色叹号,通常是.jar文件缺失,在下面找到配置 在libraries中添加add External JARs添加.jar文件

  10. Appstate的几种状态及在android 和ios触发

    AppState能告诉你当前应用是在前台还是在后台,或者处于切换应用的状态,并且能在状态变化的时候通知你. AppState 通常在处理推送通知的时候用来决定内容和对应的行为 一: App State ...