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

前端技术 2023/09/05 .NET
以下滚动效果为在网上查找。

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

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

本文地址：https://www.stayed.cn/item/13447

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案