Scrolling down to the bottom of the page load data is a lot of waterfall streaming site practice, that to see how to achieve with JSONP, side dishes summary record, the master do not spray.
Of course, this example uses the jquery library, the latter will be made into native JS.
The data in this example is called the sharp jquery Book provided by a section of JSON.
First of all to determine how the page is scrolling to the bottom, that is, Scrolltop+window's height is greater than the document's Height,jquery the following code: $ (Window). scrolltop () +$ (window). Height () >=$ (document). Height ();
Then bind the window to the scroll event. So the entire page demo can do this:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
* {margin:0; padding:0;}
body {font-size:12px;}
p{margin:5px;}
. box{padding:10px;}
</style>
<!--introduction of jquery-->
<script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type= "Text/javascript" ></ Script>
<script type= "Text/javascript" >
$ (function () {
$ (window). bind (' scroll ', function () {Show ()});
Function Show ()
{
if ($ (window). scrolltop () +$ (). Height () >=$ (document). Height ())
{
Ajaxread ();
}
}
function Ajaxread ()
{
var html= "";
$.ajax ({
Type: ' Get ',
DataType: ' Jsonp ',
URL: ' http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json& Jsoncallback=? ',
Beforesend:function () {console.log (' Loading ... ')},
Success:function (data) {
$.each (Data.items,function (I,item) {
html+= ' <div class= ' box ' > ';
html+= ' html+= ' <a hreft= ' +item.link+ ' ></a> '
html+= ' <div> ' +item.tags+ ' </div> ';
html+= ' </div> ';
});
$ ("#resText"). Append ($ (HTML));
},
Complete:function () {Console.log (' mission Acomplete. ')}
});
}
})
</script>
<body>
<p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p> <p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p> <p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p> <p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p> <p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p> <p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p> <p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p> <p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p> <p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p> <p> GoPull down </p><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> Pull down </p><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> Pull down </p><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> Pull down </p><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> Pull down </p><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> Pull down </p><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> Pull down </p><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> Pull down </p><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> Pull down </p><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> Pull down </P&G.T;<p> down </p><p> down pull </p><p> down pull </p><p> down </p><p> pull down </p ><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p ><p> down </p><p> down pull </p><p> down </p><p> pull down </p><p> pull </p ><p> pull down </p><p> down pull </p>
<div id= "ResText" >
</div>
</body>
Pull to the bottom is to implement asynchronous data loading, of course, the actual project will add if there is no data to show how to operate. These judgments will do.
