<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. Go类型特性-学习笔记

    1.组合 Go语言使用组合来完成类型的设计,设计某一类型时想要拥有其他类型的功能只需要将其他类型嵌入该类型即可. 2.接口 与其他语言不同的是,编译器会自动判断该类型是否符合某正在使用的接口,甚至不需 ...

  2. fgets()

    fgets()函数简介 读字符串函数fgets()的功能是从指定的文件中读一个字符串到字符数组中,函数调用的形式为: fgets(字符数组名,n,文件指针),要从键盘输入时文件指针的参数为:stdin ...

  3. Shrio第二天——认证、授权与其它特性

    一.认证——Authentication (即登陆),简单分析之前的HelloWorld的认证: 1. 获取当前的 Subject. 调用 SecurityUtils.getSubject(); 2. ...

  4. 20155337祁家伟 2016-2017-2 《Java程序设计》第2周学习总结

    20155337 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 这周我学习了从JDK到IDE的学习内容,简单来说分为以下几个部分 使用命令行和IDE两种方式 ...

  5. lnmp环境搭建(centos6.9+mysql5.7+php7.1+nginx1.10)

    安装前准备:CentOS 6.9 64位 最小化安装 yum install -y make gcc gcc-c++ perl zlib-devel libaio libpng libpng-deve ...

  6. 1130: [POI2008]POD Subdivision of Kingdom

    1130: [POI2008]POD Subdivision of Kingdom https://lydsy.com/JudgeOnline/problem.php?id=1130 分析: 有效状态 ...

  7. Drupal7 针对特定条件才显示区块

    当D7中开启PHP filter模块. Text format就会多出“PHP Code”选项. 而且,新建block时也会多出"Pages on which PHP code return ...

  8. Django模型层：单表操作

    一 ORM简介 查询数据层次图解:如果操作mysql,ORM是在pymysq之上又进行了一层封装

  9. 解决数据库SUSPECT(置疑)状态

    在虚拟机中运行数据库不小心强制关机了,结果有一个重要的数据库后面加上了一个suspect的关键字,在管理器中打不开,程序也不能运行. 网上有很多分析的方法,试了一些不管用,最后用这种方法解决了,记录一 ...

  10. Spring学习(六)-----Spring使用@Autowired注解自动装配

    Spring使用@Autowired注解自动装配 在上一篇 Spring学习(三)-----Spring自动装配Beans示例中,它会匹配当前Spring容器任何bean的属性自动装配.在大多数情况下 ...