Loading information, first remove 5 pages from the database to implement paging, the mouse swipe up to trigger Ajax Reload 5, to achieve asynchronous refresh, optimized loading ...

PHP Database Fetch data

<?PHP include ("conn1.php"); Include ('.. /function/functions.php'); $page=intval ($_get['page']); $page= $page = =0?1: $page; $page _size=5; $limit= ($page-1) * $page _size).",". $page _size; $sql="Select *from v9_news where catid=182 and status=99 order by inputtime desc limit $limit"; $result=mysqli_query ($link, $sql); $arr=Array (); $item=Array ();  while($row =Mysqli_fetch_assoc ($result)) {$row ['Inputtime']= Date ('m-d', $row ['Inputtime']); $row ['UpdateTime']= Date ('m-d', $row ['UpdateTime']); $arr []=$row; } $item ['page']=$page; $item ['Item']=$arr; $json=Json_encode ($item, Json_unescaped_unicode);        Echo $json; 

jquery and Ajax for sliding request loading

  functionOnload1 (url,a) {$.ajax ({type:"Get", Url:url, DataType:"JSON", Data: {page:0,}, Success:function(data) {$ (a). HTML (makehtml0 (data)); }, Error:function(i) {alert ("Network Error");                 }                        }); }   functionscroll1 (URL) {varpage=2; varOld=0; varA=true;//function of Switch timer//Swipe down$ ("#item1mobile"). Scroll (function() {                var$ This= $( This), Viewh= $( This). Height (),//Visible Height 312Contenth = $ ( This). Get (0). ScrollHeight,//Content Height 422ScrollTop = $ ( This). ScrollTop ();//scrolling Height                if(ScrollTop >Old ) {                    if(ScrollTop/(CONTENTH-VIEWH) >= 0.80) {//when you reach bottom 90%, load new content                        if(a) {$.ajax ({type:"Get", Url:url, DataType:"JSON", data: {page:page,}, Success:function(data) {$ (' #item1mobile '). Append (makehtml0 (data)); Page=data.page+1; A=true; }, Error:function(i) {alert ("Network Error"); A=true;                    }                        }); } A=false; }            }                //Slide UpOld =scrolltop}); }     varMakehtml0 =function(data) {varhtml = ' ';  for(vari = 0; i < data.item.length; i++) {HTML+ = "<div class= ' Row ' >" + "<a href= ' detail/legaldetail.php?id=" +data.item[i].id+ ' > ' + ' <div class= ' col-xs-12 content ' > ' + ' <div class= ' col-xs-12 title ' > ' +data.item[i].titl E+ "</div>" + "<div class= ' col-xs-4 date ' >" +data.item[i].inputtime+ "</div>" + "</div>" + "</a>" + "</div>" + "<div class= ' fenge111 ' >" + "</div>"; }            returnhtml; };

HTML page

 <DivID= "Item1mobile"class= "Mui-slider-item mui-control-content mui-active">             </Div><Scriptsrc= "./js/jquery.js"></Script><Scripttype= "Text/javascript">Onload1 ('http://www.zbgh.org.cn/appUnion/data/legal-data-1.php','#item1mobile'); SCROLL1 ('http://www.zbgh.org.cn/appUnion/data/legal-data-1.php');</Script>

Loading information, first remove 5 pages from the database to implement paging, the mouse swipe up to trigger Ajax Reload 5, to achieve asynchronous refresh, optimized loading ...