Home >Backend Development >PHP Tutorial >Asynchronous loading technology realizes the waterfall flow effect when the scroll bar reaches the bottom, asynchronous scroll bar_PHP tutorial
Asynchronous loading technology achieves waterfall flow effect. When the scroll bar reaches the bottom, an event is triggered. This event is written into the $.get() event and the category id and page number are passed to the internal program page. The program will return the product list of the relative page under that category. If the program queries If there is no product in the current class, it will return empty.
Scroll bar events must be written in window.onscroll to be effective. As follows:
window.onscroll=function(){<br> // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; var tops = $(document).scrollTop(); //获取滚动条的位置 var sctop = $(document).height()-$(window).height(); var id = $("#ajax_claid").val(); if(!id){ id=8; } $("#ajax_p").val(tops); if(tops>=sctop)//成立说明滚动条已在最底部 { var b=$("#ajax_p").val(); if(b>a){ page=page+1;//传递页码 } var Url = "aja_pro/"+id+"/"+page;//程序页面,查询信息返回数据,直接返回带html的信息。 $.get(Url,function(data){ $("#aja_jia").append(data); }); } };
Here is a lazyload, which is a delayed loading effect
Drag the scroll bar to load the displayed data
There are tutorials and source code inside
Reference: www.blueidea.com/...=11641
Change it to this to be compatible with IE and chrome
4ec11beb6c39d0703d1751d203c17053
window.onscroll=function(){
var a = document.documentElement.scrollTop= =0? document.body.clientHeight : document.documentElement.clientHeight;
var b = document.documentElement.scrollTop==0? document.body.scrollTop : document.documentElement.scrollTop;
var c = document. documentElement.scrollTop==0? document.body.scrollHeight : document.documentElement.scrollHeight;
if(a+b==c){
showmore();
}
}
2cacc6d41bbb37262a98f745aa00fbf0