Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
<!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>
<title>滚动到页面顶部加载</title>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/endlesspage.js" type="text/javascript"></script>
<style type="text/css">
.mainDiv {
width: 800px;
border: solid 1px #f00;
padding: 10px;
} .item {
width: 600px;
height: 50px;
border: solid 1px #00ff90;
font-size: 12px;
margin: 10px;
} .title {
font-size: 16px;
line-height: 20px;
} .content {
line-height: 14px;
}
.alink
{
display:none;
}
.loaddiv
{
display:none;
}
</style>
</head>
<body>
<h1>滚动测试</h1>
<div class="mainDiv">
<!--<div class="item">
<div class="title">title</div>
<div class="content">content content content content content content content</div>
</div>
-->
</div>
<div class="loaddiv">
<img src="data:images/loading.gif" />
</div>
<div>
<a href="javascript:void(0);" id="btn_Page" class="alink">查看更多>>></a>
</div>
</body>
</html>
/*endlesspage.js*/
var gPageSize = 10;
var i = 1; //设置当前页数，全局变量
$(function () {
//根据页数读取数据
function getData(pagenumber) {
i++; //页码自动增加，保证下次调用时为新的一页。
$.get("/ajax/Handler.ashx", { pagesize: gPageSize, pagenumber: pagenumber }, function (data) {
if (data.length > 0) {
var jsonObj = JSON.parse(data);
insertDiv(jsonObj);
}
});
$.ajax({
type: "post",
url: "/ajax/Handler.ashx",
data: { pagesize: gPageSize, pagenumber: pagenumber },
dataType: "json",
success: function (data) {
$(".loaddiv").hide();
if (data.length > 0) {
var jsonObj = JSON.parse(data);
insertDiv(jsonObj);
}
},
beforeSend: function () {
$(".loaddiv").show();
},
error: function () {
$(".loaddiv").hide();
}
});
}
//初始化加载第一页数据
getData(1); //生成数据html,append到div中
function insertDiv(json) {
var $mainDiv = $(".mainDiv");
var html = '';
for (var i = 0; i < json.length; i++) {
html += '<div class="item">';
html += ' <div class="title">' + json[i].rowId + ' ' + json[i].D_Name + '</div>';
html += ' <div class="content">' + json[i].D_Name + ' ' + json[i].D_Password + '</div>';
html += '</div>';
}
$mainDiv.append(html);
} //==============核心代码=============
var winH = $(window).height(); //页面可视区域高度 var scrollHandler = function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); //滚动条top
var aa = (pageH - winH - scrollT) / winH;
if (aa < 0.02) {//0.02是个参数
if (i % 10 === 0) {//每10页做一次停顿！
getData(i);
$(window).unbind('scroll');
$("#btn_Page").show();
} else {
getData(i);
$("#btn_Page").hide();
}
}
}
//定义鼠标滚动事件
$(window).scroll(scrollHandler);
//==============核心代码============= //继续加载按钮事件
$("#btn_Page").click(function () {
getData(i);
$(window).scroll(scrollHandler);
});
});
<%@ WebHandler Language="C#" Class="Handler" %> using System;
using System.Web;
using System.Data;
using MSCL;
using Newtonsoft.Json; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context)
{
//核心处理程序
string pageSize = context.Request["pagesize"];
string pageIndex = context.Request["pagenumber"];
if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex))
{
context.Response.Write("");
}
else
{
//请结合实际自行取分页数据，可调用分页存储过程
MSCL.PageHelper p = new PageHelper();
p.CurrentPageIndex = Convert.ToInt32(pageIndex);
p.FieldsName = "*";
p.KeyField = "d_id";
p.SortName = "d_id asc";
p.TableName = "testtable";
p.EndCondition = "count(*)";
p.PageSize = Convert.ToInt32(pageSize);
DataTable dt = p.QueryPagination();
string json = JsonConvert.SerializeObject(dt, Formatting.Indented);
context.Response.Write(json);
}
} public bool IsReusable {
get {
return false;
}
} }
[
{
"rowId": 1,
"D_Id": 1,
"D_Name": "名称1",
"D_Password": "密码测试1",
"D_Else": "其他1"
},
{
"rowId": 2,
"D_Id": 2,
"D_Name": "名称2",
"D_Password": "密码测试2",
"D_Else": "其他2"
},
{
"rowId": 3,
"D_Id": 3,
"D_Name": "名称3",
"D_Password": "密码测试3",
"D_Else": "其他3"
},
{
"rowId": 4,
"D_Id": 4,
"D_Name": "名称4",
"D_Password": "密码测试4",
"D_Else": "其他4"
},
{
"rowId": 5,
"D_Id": 5,
"D_Name": "名称5",
"D_Password": "密码测试5",
"D_Else": "其他5"
},
{
"rowId": 6,
"D_Id": 6,
"D_Name": "名称6",
"D_Password": "密码测试6",
"D_Else": "其他6"
},
{
"rowId": 7,
"D_Id": 7,
"D_Name": "名称7",
"D_Password": "密码测试7",
"D_Else": "其他7"
},
{
"rowId": 8,
"D_Id": 8,
"D_Name": "名称8",
"D_Password": "密码测试8",
"D_Else": "其他8"
},
{
"rowId": 9,
"D_Id": 9,
"D_Name": "名称9",
"D_Password": "密码测试9",
"D_Else": "其他9"
},
{
"rowId": 10,
"D_Id": 10,
"D_Name": "名称10",
"D_Password": "密码测试10",
"D_Else": "其他10"
}
]
Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果的更多相关文章
- 当滚动条滚动到页面底部自动加载增加内容的js代码
这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...
- jQuery+ajax实现滚动到页面底部自动加载图文列表效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery鼠标滚动到页面底部自动加载更多内容,使用分页
index.php代码 [html] view plaincopy <!DOCTYPE html PUBLIC ;} .single_item{padding: ...
- Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页
1.index.php <style type="text/css"> #container{margin:10px auto;width: 660px; border ...
- 页面滚动到底部自动 Ajax 获取文章
页面滚动到底部自动 Ajax 获取文章 代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) { if (_time ...
- javascript&jquery 判断滚动到页面底部
js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2. ...
- vue 实现滚动到页面底部开始加载更多
直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in ...
- vue使用H5实现滚动到页面底部时加载数据
使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了 实现效果: 实现代码: 首先添加监听滚动事件 mounted() { window.addEventListen ...
- jquery实现滚动到页面底部时无限加载内容的代码
var p="{$other.p}"; if(p=="") p=1; var stop=true;//触发开关,防止多次调用事件 $(window).scrol ...
随机推荐
- AJAX 处理xml 数据
//这个方式返回的得是 xml标准的对象,可以返回 xml字符串,前端js 使用转为xml function createXml(str){ if(document.all){//IE浏览器 va ...
- Mac系统的终端显示git当前分支
当我第一次在mac系统下使用git的时候,发现一个问题,git默认是不显示当前所在的分支名称,然后网上查找资料,找到了解决办法,终于可以显示本地当前分支,现在分享如下. 1 进入你的home目录 cd ...
- Java语言课程设计——博客作业教学数据分析系统(201521123107 张翔)
#Java语言课程设计--博客作业教学数据分析系统(个人博客) 1.团队课程设计博客链接 [博客作业教学数据分析系统(From:网络五条狗)](http://www.cnblogs.com/fanta ...
- oop学习 计算器类的规划
类的学习 题目要求 采取面向对象的方法,四则运算自动出题软件,根据需求可以划分为几个类?每个类具有什么属性?每个类具有什么行为? 类与类之间是如何进行协作的?谁给谁发送消息?谁持有谁的引用? 该自动出 ...
- 团队作业4——第一次项目冲刺（Alpha版本） Day5
首先和助教及老师表示抱歉,博客确实当时就写了,但是一直不算写好,因为这几天卡住了,预计实现的功能实现不了,进度跟不上,现在也在寻求解决方法. 1.站立式会议: 2. Leangoo任务分解图: 3.任 ...
- 201521123057 《Java程序设计》 第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:源代码: pub ...
- 201521123121 《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句 ...
- 201521123001《Java程序设计》第3周学习总结
1. 本周学习总结 2. 书面作业 1. 代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; ...
- 201521123076 《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 创建线程方式: 定义Thread的子类,覆盖run(),之后创建实例.因为开销大,一般不用. 定义实现Run ...
- 201521123110 《Java程序设计》第9周学习总结
1. 本周学习总结 2. 书面作业 1.常用异常 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 原来编写代码经常会出现数组访问 ...