Subject:Use the scroll event of jquery to automatically load new items when the scroll bar reaches the bottom.
Principle:In the scroll bar event, determine whether to reach the bottom. If yes, call the add method to asynchronously Append content to the end.
Supplement 1:The website www.diandian.com
2:Alternative: put a button at the bottom of the friend dynamics in the QQ space and load data asynchronously!
Prerequisites:Add jquery. Min. js
Source code:
(The following code describes the accuracy of the method to determine whether the result is at the bottom)
Certificate ----------------------------------------------------------------------------------------------------------------------------------------------
<HTML>
<Head>
<SCRIPT src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Function insertcode (){
VaR $ body = $ ("body ");
$ Body. append ('<Div style = \ "height: 1000px; font-size: 24px; \"> Add project </div> ')
$ ("# Page_tag_load"). Hide ();
}
$ (Document). Ready (function (){
$ (Window). Scroll (function (){
VaR $ body = $ ("body ");
VaR $ html = "";
$ HTML + = "<br/>" + ($ (window). Height () + $ (window). scrolltop ());
$ HTML + = "<br/> window. Height:" + $ (window). Height ();
$ HTML + = "<br/> body. Height:" + $ body. Height ();
$ HTML + = "<br/> window. scrolltop:" + $ (window). scrolltop ();
$ ("# Page_tag_bottom" ).html ($ html );
/* Determine whether the sum of the form height and vertical scroll displacement exceeds the content page height */
If ($ (window). Height () + $ (window). scrolltop () >=$ body. Height ()){
$ ("# Page_tag_load"). Show ();
// SetTimeout (insertcode, 1000);/* IE does not support */
Insertcode ();
}
});
});
</SCRIPT>
</Head>
<Body>
<Div style = "height: 1000px; font-size: 24px;"> Add project </div>
<Div id = "page_tag_bottom" style = "width: 100%; position: fixed; top: 0px; Background-color: # cccccc; Height: 100px;"> </div>
<Div id = "page_tag_load" style = "display: none; font-size: 14px; position: fixed; bottom: 0px; Background-color: # cccccc; Height: 50px; "> loading... </div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
