Mobile drop-down page load plugin dropload.js

First, Dropload.js:

http://www.jq22.com/jquery-info6960

The address has a dropload.js of the basic documentation, download the compression package has the corresponding demo

Second, Reliance

Zepto or jquery 1.7 or above, recommended jquery 2.x version (do not reference both)

Zepto or jquery 1.7+,recommend to use jquery 2.x (not with them at the same time)

Third, the bug and the solution

1. Small screen phone does not load the problem

Scheme: Change the distance (pull distance) parameter of the source file to 2000;

1. Fuzzy query, click the Search button, because the pull-up event can not be triggered, into the page there is no data problems.

Generally speaking, dropload loading is no problem, however, the demand is often not the server to return all the data at once, often also to support service-side paging, search, sorting, multi-conditional filtering and other functions. The paging problem doesn't have to be said, the meaning of dropload itself is paging loading

Some time ago, when using dropload for conditional queries, this problem was encountered.

Scenario: The idea of Dropload itself is to request one page of data (number customization) to the server at a time. This reduces the server response time by requesting only a few required data at a time.

The idea of solving this problem is to step-load, the first step, do not use Dropload to make Ajax request the first page of data, the remaining pages use Dropload request

The improvement code is as follows:

function Selectmore (EL) {var pagenum= 1; //Show 6 per pagevar pageSize = 6; var keyword= $ (". Search Input"). Val (); var ID= Geturlparam ("id"); El.find ($ ('. Lists '). HTML (""); $('. Dropload-down '). Remove (); var result= ' '; $.ajax ({type:"POST", Url:BasicPath.URL+interfacejson.pageselect, Async:true, data:{pagesize:pagesize, Pagenum:pagenum, Categoryid:id, Patt Ern:keyword}, Success:function (res) {var lists=res.data.list; var Arrlen=lists.length;  for(var i = 0; i < Arrlen; i++) {result+ = ";//HTML template, you know} setTimeout (function () {//insert data into the page and put it on the last sideEl.find ($ (". Lists") . Append (Result); },500); if(arrlen<6){                $(". Dropload-refresh"). HTML (' No more content '); }}) Self.morefund=el.dropload ({scrollarea:window, domdown:{domclass:' Dropload-down ', Domrefresh:' <div class= ' Dropload-refresh ' >↑ pull-up load more </div> ', Domload:' <div class= ' dropload-load ' > Loading in </div> ', Domnodata:' <div class= ' dropload-nodata ' > No more Content </div> '}, Distance:2000, Loaddownfn:function (Me) {pagenum++; var result= ' '; $.ajax ({type:"POST", Url:BasicPath.URL+interfacejson.pageselect, Async:true, data:{pagesize:pagesize, Pagenum:pagenum,                                    Categoryid:id, Pattern:keyword}, Success:function (res) { var lists=res.data.list; var Arrlen=lists.length; if(arrlen>0 ){                         for(var i = 0; i < Arrlen; i++) {result+ = ";//HTML template, you know                        }; }Else{                        //LockMe.lock (); //No DataMe.nodata (); } setTimeout (function () {//insert data into the page and put it on the last sideEl.find ($ (". Lists") . Append (Result); //every time the data is inserted, it must be resetme.resetload (); },500); }, Error:function (XHR, type) {alert (' Ajax error! '); //Reset Even if loading is wrongme.resetload ();            }            }); }    })  }

This is the perfect solution to the Android phone, the first click Search does not query the issue.

Mobile drop-down page load plugin dropload.js