jquery scrolling to the bottom of the page automatic Ajax loading graphic list, like image lazy loading effect, with loading effect

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
/*endlesspage.js*/var Gpagesize = 10;var i = 1;        Set the current number of pages, global variables $ (function () {///////////////GetData (pagenumber) {i++;//page numbers are automatically incremented to ensure that the next call is a new 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 ();    }        });}//Initialize loading the first page of data getData (1);        Generate Data html,append to div in 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 ();        Page viewable area height 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 pages do a pause!                GetData (i);                $ (window). Unbind (' scroll '); $ ("#btn_Page"). Show ();                } else {getData (i);            $ ("#btn_Page"). Hide ();    }}}//define mouse scrolling event $ (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 Program String pageSize = Context.        request["pagesize"]; String PageIndex = context.        request["PageNumber"]; if (string. IsNullOrEmpty (pageSize) | | String. IsNullOrEmpty (PageIndex)) {context.        Response.Write (""); } else {///to fetch paging data in the actual way, you can call the paging stored procedure 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": "Other 1"}, {"RowId": 2, "d_id": 2, "D_name": "Name 2", "D_password": "Password Test 2", "D_else": "Other 2"}, {"RowId": 3, "d_id": 3, "D_na Me ":" Name 3 "," D_password ":" Password Test 3 "," D_else ":" Other 3 "}, {" RowId ": 4," d_id ": 4," D_name ":" Name 4 "," D_pas Sword ":" Password Test 4 "," D_else ":" Other 4 "}, {" RowId ": 5," d_id ": 5," D_name ":" Name 5 "," D_password ":" Password Test 5 ","     D_else ":" Other 5 "}, {" RowId ": 6," d_id ": 6," D_name ":" Name 6 "," D_password ":" Password Test 6 "," D_else ":" Other 6 "}, { "RowId": 7, "d_id": 7, "D_name": "Name 7", "D_password": "Password Test 7", "D_else": "Other 7"}, {"RowId": 8, "D  _id ": 8," D_name ":" Name 8 "," D_password ":" Password Test 8 "," D_else ":" Other 8 "}, {" RowId ": 9," d_id ": 9," D_name ": "Name 9", "D_password": "Password Test 9", "D_else": "Other 9"}, {"RowId": Ten, "d_id": Ten, "D_name": "Name Ten", "D_pass Word ":" Password Test ten "," D_eLSE ": Other 10"}]             

jquery scrolling to the bottom of the page automatic Ajax loading graphic list, like image lazy loading effect, with loading effect