js滚动异步加载数据的思路

<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>

  

时间: 2024-08-27 12:27:02

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

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

Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 菜鸟教程(runoob.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&quo

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

iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ 下面是按照官网给的Demo,写的一个异步加载数据实例: 1 <title>iScroll demo: click</title> 2 <script src="~/Scripts/iscroll5/jquery-1.10.2.js"></scrip

向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)

/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name ajax异步的URL中的页码参数名 如pageno page_no 初始加载页码,默认1 [如2,则与前面两参数结合为data.php?pageno=2] is_lazyload 是否开启懒加载 page_count 总页数 empty_msg 没有数据的时候提示(可传输图片) ending_msg

SpringMVC+Jquery -页面异步加载数据

背景: 做项目时涉及到页面,当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新,这都是几百年前使用的技术了.你用post实现异步加载数据.然后就...... ResultUtil.java 工具类: package com.sgcc.uds.fs.config.web.util; import java.util.HashMap; import java.util.Map; import net.sf.json.JSO

淘宝购物车页面 智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

使用ajax异步加载数据

使用ajax异步加载数据 controller为User赋值 @RequestMapping("/a2") public List<User> a2() { List<User> userlist = new ArrayList<User>(); userlist.add(new User("大头儿子", 6, "男")); userlist.add(new User("小头爸爸", 30,

jQuery异步加载数据添加事件

几个月前在一个项目中涉及到树形栏,然后看了很多插件,觉得有点麻烦,于是自己写了一个,写着写着就出问题了.当时项目是通过树形栏进行权限控制的,管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作,可是用$(".XX").click();方法是不行的.1.之前用的是jq1.4.3 ,jq1.7一下都可以使用live()方法,来实现该功能 $('#div').live('click',function(){ //do stuff }); 但是live方法也有不支持的事件,例如:togg

Android利用Volley异步加载数据完整详细示例(二)

MainActivity如下: package cc.y; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.os.Bundle; import android.util.LruCache; import android.widget.ImageView;

Android利用Volley异步加载数据完整详细示例(一)

MainActivity如下: package cc.cn; import java.util.HashMap; import org.json.JSONObject; import android.app.Activity; import android.content.Context; import android.os.Bundle; import com.android.volley.AuthFailureError; import com.android.volley.RequestQ