jQuery+ajax realizes scrolling to the bottom of the page and automatically loading the picture list effect of is similar to lazy loading of pictures
- 2021-06-28 06:15:46
- OfStack
This article example describes the jQuery + ajax to achieve scrolling to the bottom of the page automatically loading graphic list effect. Share it for your reference, as follows:
<!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> Scroll to the top of the page to load
</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> Rolling test
</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="images/loading.gif" />
</div>
<div>
<a href="javascript:void(0);" id="btn_Page" class="alink"> See more
>>></a>
</div>
</body>
</html>
/*endlesspage.js*/
var gPageSize = 10;
var i = 1; // Set the current number of pages, global variables
$(function () {
// Read data according to the number of pages
function getData(pagenumber) {
i++; // The page number is automatically increased to ensure that it is new when the next call is made
1 Page.
$.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();
}
});
}
// Initializes loading the
1 Page data
getData(1);
// Generate data
html,append To
div Medium
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);
}
//============== Core code
=============
var winH = $(window).height(); // Height of visual area of page
var scrollHandler = function () {
var pageH = $(document.body).height();
var scrollT = $(window).scrollTop(); // Scroll bar
top
var aa = (pageH - winH - scrollT) / winH;
if (aa < 0.02) {//0.02 Is a parameter
if (i % 10 === 0) {// Every
10 Page making
1 The second pause!
getData(i);
$(window).unbind('scroll');
$("#btn_Page").show();
} else {
getData(i);
$("#btn_Page").hide();
}
}
}
// Define mouse scrolling events
$(window).scroll(scrollHandler);
//============== Core code
=============
// Continue loading button event
$("#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)
{
// Core handler
string pageSize = context.Request["pagesize"];
string pageIndex = context.Request["pagenumber"];
if (string.IsNullOrEmpty(pageSize) || string.IsNullOrEmpty(pageIndex))
{
context.Response.Write("");
}
else
{
// Please take paging data by yourself according to the actual situation, and call paging stored procedures
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": " Name
1",
"D_Password": " Password test
1",
"D_Else": " Others
1"
},
{
"rowId": 2,
"D_Id": 2,
"D_Name": " Name
2",
"D_Password": " Password test
2",
"D_Else": " Others
2"
},
{
"rowId": 3,
"D_Id": 3,
"D_Name": " Name
3",
"D_Password": " Password test
3",
"D_Else": " Others
3"
},
{
"rowId": 4,
"D_Id": 4,
"D_Name": " Name
4",
"D_Password": " Password test
4",
"D_Else": " Others
4"
},
{
"rowId": 5,
"D_Id": 5,
"D_Name": " Name
5",
"D_Password": " Password test
5",
"D_Else": " Others
5"
},
{
"rowId": 6,
"D_Id": 6,
"D_Name": " Name
6",
"D_Password": " Password test
6",
"D_Else": " Others
6"
},
{
"rowId": 7,
"D_Id": 7,
"D_Name": " Name
7",
"D_Password": " Password test
7",
"D_Else": " Others
7"
},
{
"rowId": 8,
"D_Id": 8,
"D_Name": " Name
8",
"D_Password": " Password test
8",
"D_Else": " Others
8"
},
{
"rowId": 9,
"D_Id": 9,
"D_Name": " Name
9",
"D_Password": " Password test
9",
"D_Else": " Others
9"
},
{
"rowId": 10,
"D_Id": 10,
"D_Name": " Name
10",
"D_Password": " Password test
10",
"D_Else": " Others
10"
}
]
PS: This also involves json format data interactive operation, on json data operation this site recommends several online tools for your reference, I believe in the future development can come in handy:
Online JSON code verification, verification, beautification and formatting tools:
http://tools.ofstack.com/code/json
Online XML/JSON Interconversion Tools:
http://tools.ofstack.com/code/xmljson
json code online formatting/beautification/compression/editing/conversion tool:
http://tools.ofstack.com/code/jsoncodeformat
C Language Style/HTML/CSS/json Code Formatting and Beautification Tool:
http://tools.ofstack.com/code/ccode_html_css_json
For more readers interested in jQuery related content, please check the topics of this site: "Summary of Ajax Usage in jquery", "Summary of jQuery Table (table) Operation Skills", "Summary of jQuery Drag Effects and Skills", "Summary of jQuery Extension Skills", "Summary of jQuery Common Classic Effects", "Summary of jQuery Animation and Special Effects Usage", "Summary of jquery Selector Usage" and "Summary of jQuery Common Plugins and Usage"
I hope this article is helpful to everyone's jQuery programming.