The example in this article describes the method of the jquery scrolling load data. Share to everyone for your reference. The specific analysis is as follows:
When we browse some Web pages, when we pull the browser's scroll bar to the bottom of the page, the page will continue to automatically load more content for the user to browse. This technology for the moment I call it rolling screen loading technology, we found that many sites use this technology, such as Sina Weibo, QQ space and so on.
The code is as follows:
Copy Code code as follows:
<! Doctype=html>
<script src= "Js/jquery.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
var range = 50; Distance below boundary length/unit px
var elemt = 500; Insert element height/unit px
var maxnum = 20; Set Maximum load times
var num = 1;
var totalheight = 0;
var main = $ ("#content"); Principal element
$ (window). Scroll (function () {
var Srollpos = $ (window). scrolltop (); scroll bar distance from top (page exceeds height of window)
Console.log (The vertical height of the scroll bar to the top: +$ (document). ScrollTop ());
Console.log ("Document height of page:" +$). Height ());
Console.log (' Browser height: ' +$ (window). Height ());
Totalheight = parsefloat ($ (window). Height ()) + parsefloat (srollpos);
if ((document). Height ()-range) <= totalheight && num!= maxnum) {
Main.append ("<div style= ' border:1px solid Tomato;margin-top:20px;color: #ac" + (num%20) + (num%20) + "; Height:" +elemt + "' >hello World" +srollpos+ "---" +num+ "</div>");
num++;
}
});
});
</script>
<body>
<div id= "Content" style= "height:960px" >
<div id= "Follow" >this is a scroll test;<br/> page drop-down auto load content </div>
<div style= ' border:1px solid tomato;margin-top:20px;color: #ac1; height:800 ' >hello World Test div</div>
</div>
</body>
I hope this article will help you with your jquery programming.
