Jquery+ajax implementation scrolling to the bottom of the page automatically load the graphics and text list effect (similar to the picture lazy load) _jquery

This article describes the Jquery+ajax implementation scrolling to the bottom of the page to automatically load a text list effect. Share to everyone for your reference, specific as follows:

<! 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 variable $ (function () {//Read data based on page function GetData (pagenumber) {i++;//page automatically increases 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 load first page data getData (1);
    Generate Data html,append to 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); //============== Core code ============= var Winh = $ (window). Height ();
    Page Visual Region 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 handler string Pagesi Ze = context.
    request["pagesize"]; String PageIndex = context.
    request["PageNumber"]; if (string. IsNullOrEmpty (pageSize) | | String. IsNullOrEmpty (PageIndex)) {context.
    Response.Write (""); else {//You can invoke the paging stored procedure MSCL by combining the paging data with your own.
      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_name": "Name 3", "D_password": "Password Test 3", "D_else": "Other 3"}, {"RowId": 4, "d_id": 4, "D_name": "Name 4", " D_password ":" 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 "}, {" Ro WId ": 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_passwo RD ": Password Test 9", "D_else": "Other 9"}, {"RowId": Ten, "d_id": Ten, "D_name": "Name Ten", "D_password": "Password Test", "d_els E ":" Other Ten}] 

PS: Here also involves the JSON format data interoperability, about the JSON data operation small series recommend several site online tools for your reference, I believe that in future development can be used:

Online JSON code inspection, inspection, landscaping, formatting tools:
Http://tools.jb51.net/code/json

Online Xml/json Mutual Conversion tool:
Http://tools.jb51.net/code/xmljson

JSON code online Format/beautify/compress/edit/Convert tools:
Http://tools.jb51.net/code/jsoncodeformat

C Language Style/html/css/json code formatting landscaping Tools:
Http://tools.jb51.net/code/ccode_html_css_json

More interested readers of jquery-related content can view the site's topics: A summary of Ajax usage in jquery, a summary of jquery table (table) operations tips, a summary of jquery drag-and-drop effects and techniques, a summary of jquery extension techniques, jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.