浏览器窗口滚动加载数据采用异步形式从后台加载数据

以下滚动效果为在网上查找。

在滚动条距顶部距离(页面超出窗口的高度)时采用异步形式从后台加载数据


代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollLoadData.aspx.cs" Inherits="WebApplication1.ScrollLoadData" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>滚动加载数据库数据</title>
<script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {

var range = 50; //距下边界长度/单位px
var elemt = 500; //插入元素高度/单位px
var maxnum = 20; //设置加载最多次数
var num = 1;
var totalheight = 0;
var main = $("#content"); //主体元素
$(window).scroll(function(){
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)

totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
if (($(document).height() - range) <= totalheight && num != maxnum) {
$.ajax({
url: "../demo/HandlerDemo.ashx",//显示数据的方法页
type: "GET",
data: "name=json",
dataType: "json",
//cache: false,
success: function (data) {
data = eval(data);
var varHtml = "";
varHtml = "<ul>"
$(data).each(function (i) {
varHtml += "<li>" + data[i].ID + ":" + data[i].Event + "</li>"; //ID 和Event为数据库映射的字段
});
varHtml += "</ul>";
main.append("<div style='border:0px solid tomato;margin-top:20px;color:#ac" + (num % 20) + (num % 20) + ";height:" + elemt + "' >hello world" + srollPos + "<br />"+varHtml + "---" + num + "</div>");
},
error: function () {
alert("error");
}

});

num++;
}
});
});
</script>
<style type="text/css">
li
{
list-style-type:none;
float:left;
padding-left:20px;

}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="content" style="height:960px">
<div id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</div>
<div style='border:1px solid tomato;margin-top:20px;color:#ac1;height:800' >hello world test DIV</div>
</div>

</form>
</body>
</html>

赞 (0)

相关推荐

  • Blocksit插件实现瀑布流数据无限( 异步)加载

    html代码: <div style="width:1000px; overflow:hidden; margin:0 auto"> <div class="kppcl" style="width:1008px; position:relative" id="kppcl"> <div class="kppcld"> <div class="kppcld_t

  • jQuery异步加载数据并添加事件示例

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

  • asp.net 使用js分页实现异步加载数据

    asp.net 使用js分页实现异步加载数据

    1.准备工作 引入"jquery-1.8.3.min.js",AjaxPro.2.dll":用于前台js调用后台方法. 2.Web.config的配置 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <configuration> <connectionStrings> <clear/> <!-- 数据库链接 --> <

  • EASYUI TREEGRID异步加载数据实现方法

    EASYUI TREEGRID异步加载数据实现方法

    官方提供的treegrid的ex 我给大家贴出来看看吧: 复制代码 代码如下: $(function(){ $('#tt').treegrid({ url:'treegrid_data3.json', onAfterEdit:function(row,changes){ alert(row.name); } }); }) 这个是页面初始化的. 看看他的JSON: 复制代码 代码如下: {"total":117,"rows":[ <SPAN style=&quo

  • struts2+jquery+json实现异步加载数据(自写)

    复制代码 代码如下: //初始加载页面时 $(document).ready(function(){ //为获取单个值的按钮注册鼠标单击事件 $("#getMessage").click(function(){ $.getJSON("ceshi",function(data){ //通过.操作符可以从data.message中获得Action中message的值 $("#message1").html("<font color='

  • 自写的jQuery异步加载数据添加事件

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

  • 如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

    ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 效果演示      源码下载 本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据.通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方

  • 浏览器窗口滚动加载数据采用异步形式从后台加载数据

    以下滚动效果为在网上查找. 在滚动条距顶部距离(页面超出窗口的高度)时采用异步形式从后台加载数据 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollLoadData.aspx.cs" Inherits="WebApplication1.ScrollLoadData" %> <!DOCTYPE html PUBL

  • Javascript中浏览器窗口的基本操作总结

    Javascript中浏览器窗口的基本操作总结

    窗口位置 [1]获取 浏览器(firefox不支持)提供了screenLeft和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置 在窗口最大化的情况下,运行下列代码时,各个浏览器返回的值并不相同.chrome返回left:0;top:0.而IE则返回left:0;top:56(若有菜单栏,则返回left:0;top:78),这是因为IE中保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离.safari则由于自身的bug,返回left:-8;top:-8 //移

  • jQuery Ajax 加载数据时异步显示加载动画

    jQuery Ajax 加载数据时异步显示加载动画

    ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动画

  • Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块完美实现

    Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块完美实现

    中午的时候发了第一篇 Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块 ,发现实现上还是有问题,有很多理解不到位的地方,晚上详细解决下了,终于实现MVC各模块按需加载了,哈皮. 上篇文章中,关于ExtJs这个玩意的评论就跟java和.Net那个好一样,既然上了贼船,就难下了,而且对于企业级的应用我个人觉得Extjs框架还是不错的,尤其是没有UI设计的团队(苦逼的程序员就兼UI吧),起码难得发现一个做的比较好的UI框架(国产的miniUI貌似看的过去,其他的就有点

  • vue实现按需加载组件及异步组件功能

    说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template中的代码: 这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名 <template slot-scope="scope"> <el-button type="text" size="mini" @click=&qu

  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 复制代码 代码如下: <!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//*

  • jquery dataTable 后台加载数据并分页实例代码

    使用 dataTable后台加载数据并分页.网上版本很多,但很多都是不能用或者不详细的,这里是已经验证过的. 引用 js文件 <script src="static/ace/js/jquery-2.0.3.min.js"></script> <script src="static/ace/js/jquery.dataTables.min.js"></script> <script src="static

  • javascript浏览器窗口之间传递数据的方法

    javascript浏览器窗口之间传递数据的方法

    本文实例讲述了javascript浏览器窗口之间传递数据的方法.分享给大家供大家参考.具体分析如下: 摘要: 在项目开发中我们经常会遇到弹窗,有的是通过div模拟弹窗效果,有的是通过iframe,也有通过window自带的open函数打开一个新的窗口.今天给大家分享的是最后一种通过window.open()函数打开页面进行数据交互.首先看下效果图: 原理: 父窗口给子窗口传递数据是通过url的参数传递过去,子窗口给父窗口传递数据是通过父窗口的全局函数传递. 代码: index.html如下: 复

  • 解析vue路由异步组件和懒加载案例

    最近研究了vue性能优化,涉及到vue异步组件和懒加载.一番研究得出如下的解决方案. 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 案例: 首先是组件,创建四个组件分别命名为first.second.three和four:内容如下 first <template> <div>我是第一个页面</div> </template> second <template> <div>我是第二个页面

随机推荐