JQuery implements the effect of dynamically loading content when pages scroll with the scroll bar

Sina Weibo has this function. I just thought about it and briefly wrote the implementation method. The code is JavaScript.

It is undeniable that this method is a product of Web and has a good user experience. Besides Weibo's use of this method, in addition, I also found that several other websites are using this method because their website pages are relatively long, as a result, users are constantly loading new content to the browser as the scroll bar is dragged. Although the experience is good, I feel that this method is less friendly to search engines. thank you for reprinting, but please indicate the source Email: See7di@Gmail.com, Seven blog http://hi.baidu.com/see7di

So unless I have to use this method, I have not found any program in my work that needs this method.

However, innovation is a kind of progress, isn't it?

The following code is implemented directly using javascript:
Window. onscroll = function (){
Var water = document. getElementById ("water ");
Water. style. top = (document.doc umentElement. scrollTop | document. body. scrollTop) + 'px ';
Water. innerHTML = "scrollTop:" + (document.doc umentElement. scrollTop | document. body. scrollTop) + "<br/> ClientHeight:" + document.doc umentElement. clientHeight + "<br/> scrollHeight:" + document.doc umentElement. scrollHeight;

// When the scroll bar is at the bottom
If (document.doc umentElement. scrollHeight = (document.doc umentElement. scrollTop | document.body.scrolltoptop+document.doc umentElement. clientHeight ){
// Request new data at the bottom
Var table = I. $ ('tag', 'table') [0];
Var start = parseInt (table. rows [table. rows. length-1]. cells [0]. innerHTML) + 1 ;;
Var length = 10;
Var param = 'start = '+ start +' & length = '+ length;
I. AJAX. post ('/test2/dataservlet', param, function (o ){
Var persons = I. AJAX. json (o. responseText );
// Load 10 new rows of data
For (var I = 0; I <persons. length; I ++ ){
Var row = table. insertRow (table. rows. length );
Row. insertCell (0). innerHTML = persons [I]. id;
Row. insertCell (1). innerHTML = persons [I]. name;
Row. insertCell (2). innerHTML = persons [I]. age;
Row. insertCell (3). innerHTML = persons [I]. hoppy;
}
// Delete the first 10 rows of data
For (var I = 0; I <10; I ++ ){
Table. deleteRow (1 );
}
Optional bytes scroll(0, parseint(document.doc umentElement. scrollTop)-15); // you can specify the position of the scroll bar.
});
}

// When the scroll bar is at the top
If(document.doc umentElement. scrollTop | document. body. scrollTop) = 0 ){

Var table = I. $ ('tag', 'table') [0];

Var e = table. rows [1]. cells [0]. innerHTML;
If (e! = '0 '){
Var s = parseInt (e)-10 <0? 0: parseInt (e)-10;
Var param = 'start = '+ s +' & length = 10 ';
I. AJAX. post ('/test2/dataservlet', param, function (o ){
Var persons = I. AJAX. json (o. responseText );
// Load 10 new rows of data
For (var I = 0; I <persons. length; I ++ ){
Var row = table. insertRow (I + 1 );
Row. insertCell (0). innerHTML = persons [I]. id;
Row. insertCell (1). innerHTML = persons [I]. name;
Row. insertCell (2). innerHTML = persons [I]. age;
Row. insertCell (3). innerHTML = persons [I]. hoppy;
}
// Delete the last 10 rows of data
For (var I = 0; I <10; I ++ ){
Table. deleteRow (table. rows. length-1 );
}
Window. scroll (); // you can specify the position of the scroll bar.
});
}
}

The following code is implemented using Jquery:
// Sensor the height of the scroll bar to load new content
$ (Window). scroll (function (){
Aa = parseInt ($ (document). height (); // obtain the document height.
Oo = parseInt ($ (document). scrollTop (); // obtain the vertical height of the scroll bar to the top.

If (aa-oo) <800 ){
If (! Window. ia ){
Ia = 1;
$. Post ("sys. php ", {work:" hotels ", s :( 'a = c + d China e + f & g> H')}, function (msg) {// use ajax to instantly obtain information on the server
If (msg. length> 0 ){
$ ("# Index # tab5 # tab19"). last (). after (msg );
Ia = null;
} Else {
$ ("# Index # div2"). last (). remove ();
$ ("# Index # tab5 # tab19"). last (). after ('<span> Error: no results found. Please try changing the search criteria! </Span> ');
}
});
}
}
});

Additional reading:
Jquery Plugin-images can be instantly loaded as the scroll bar rolls
Http://hi.baidu.com/see7di/blog/item/3d698352fd0fee170cf3e381.html