<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. OpenStack部署博客推荐

    OpenStack部署推荐博客 shhnwangjian https://www.cnblogs.com/shhnwangjian/category/942049.html(推荐) 点评: 1.实现过 ...

  2. python习题20190130

    #encoding=utf-8 ''' 一家商场在降价促销.如果购买金额50-100元(包含50元和100元)之间,会给10%的折扣,如果购买金额大于100元会给20%折扣.编写一程序,询问购买价格, ...

  3. nodejs搭建web服务器初级

    nodejs搭建简单的web服务器 1.1简介 Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用于创建快 ...

  4. 20155306 2016-2017-2《Java程序设计》课程总结

    20155306 2016-2017-2<Java程序设计>课程总结 (按顺序)每周作业链接汇总 •预备作业1:对自己专业看法及.学习Java的期望,以及心中的师生关系. •预备作业2:C ...

  5. 20155313 2016-2017-2《Java程序设计》课程总结

    20155313 2016-2017-2<Java程序设计>课程总结 目录 一.每周作业链接汇总 二.实验报告链接汇总 三.代码托管链接 四.课堂项目实践 五.课程收获与不足 六.问卷调查 ...

  6. 20145207李祉昂《网络对抗技术》可选实验 shellcode注入与Return-to-libc攻击实验

    1.0 实践内容 Return-to-libc攻击是一种特殊的缓冲区溢出攻击,通常用于攻击有“栈不可执行”保护措施的目标系统.本实验中我们放弃了让漏洞程序执行堆栈中的shellcode,将用syste ...

  7. 【转载】3D/2D中的D3DXMatrixPerspectiveFovLH和D3DXMatrixOrthoLH投影函数详解

    原文:3D/2D中的D3DXMatrixPerspectiveFovLH和D3DXMatrixOrthoLH投影函数详解 3D中z值会影响屏幕坐标系到世界坐标系之间的转换,2D中Z值不会产生影响(而只 ...

  8. dsp6657的helloworld例程测试-第一篇

    环境搭建可以参考http://blog.sina.com.cn/s/blog_ed2e19900102xi2j.html 1. 先从mcsdk导入工程,helloworld例程 2. 提示有错误,估计 ...

  9. Linux 的字符串截取

    假设有变量 var=http://www.aaa.com/123.htm 1. # 号截取,删除左边字符,保留右边字符. echo ${var#*//} 其中 var 是变量名,# 号是运算符,*// ...

  10. header field token is not allowed by Access-Control-Allow-Headers in preflight response问题解决

    今天下午,本来打算使用aioxs在header里传一个token给后台服务器,如下图所示: 结果,控制台报了如下的错: 然后,我不停地百度,不停的改后台express的header设置,一直没有效果: ...