<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. hive错误排查一：hive中执行 drop table命令卡住，删除表不成功

    起因 公司用的AWS EMR上的hive,突然不能删除表了. 经过 分析来看,估计是元数据那块出了问题.从元数据入手,元数据存在mysql的hive数据库中 直接使用hive配置文件hive-site ...

  2. Python3爬虫（十八） Scrapy框架（二）

    对Scrapy框架(一)的补充 Infi-chu: http://www.cnblogs.com/Infi-chu/ Scrapy优点:    提供了内置的 HTTP 缓存 ,以加速本地开发 .   ...

  3. python 位运算【实测】

    python 位运算符为  << 左移,>> 右移 3<<2 既 3 的二进制整体向左移两位 : : 可以这么算 3*(2的2次方)= 12 11>> ...

  4. Java六大设计原则

    类的设计原则     依赖倒置原则-Dependency Inversion Principle (DIP) 里氏替换原则-Liskov Substitution Principle (LSP) 接口 ...

  5. 【笔记学习】Linux系统与虚拟机学习

    Part 1 : 基于VirtualBox虚拟机安装Ubuntu 问题剪辑 --给一开始未知的我的科普指南 1. VirtualBox不能创建64位虚拟机 解决办法: 开启虚拟化技术 详细:重启电脑, ...

  6. day3 直方图

    1.绘制直方图 # coding=utf-8 import cv2 import numpy as np from matplotlib import pyplot as plt img1 = cv2 ...

  7. BZOJ3174. [TJOI2013]拯救小矮人（dp）

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3174 题解 其实此题并不需要那么多YY的部分. 我们考虑若干个小矮人逃出的顺序.若跳出的 ...

  8. 搜索引擎ElasticSearch系列（五）： ElasticSearch2.4.4 IK中文分词器插件安装

    一:IK分词器简介  IK Analyzer是一个开源的,基于java语言开发的轻量级的中文分词工具包.从2006年12月推出1.0版开始, IKAnalyzer已经推出了4个大版本.最初,它是以开源 ...

  9. 理解学习Springboot（一）

    Springboot有何优势呢,网上一大推,这里就不写了. 一.配置maven 1.在maven官网下载maven,http://maven.apache.org/download.cgi 2.将下载 ...

  10. 415. Valid Palindrome【LintCode java】

    Description Given a string, determine if it is a palindrome, considering only alphanumeric character ...