JQuery實現頁面隨捲軸滾動而動態載入內容的效果

      新浪微博有這個功能,剛才思考一下 ,簡單的寫了一下實現方法,代碼是Js的.

      無可否認,這種方式應該算是web2.0的產物,在使用者體驗上具備很好的感受,除了微博在使用該方式外,另外我還發現有幾個其他性質的網站也在用這種方式,原因是他們的網站頁面比較長,所以使用者在瀏覽的時候隨著捲軸的拖拽而不斷載入新的內容到瀏覽器內,雖然體驗會不錯,但是我感覺這種方式對搜尋引擎的友好性將會降低.歡迎轉載但請註明出處Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di

      所以除非不得已我是不會使用這種方式的,就目前來看我的作品內我還沒發現哪個程式需要使用這種方式.

      不過不論如何,創新就是一種進步,難道不是嗎?

下邊的代碼是直接使用javascript來實現:
window.onscroll = function(){
var water = document.getElementById("water");
water.style.top = (document.documentElement.scrollTop|document.body.scrollTop)+'px';
water.innerHTML = "scrollTop:" + (document.documentElement.scrollTop|document.body.scrollTop) + "<br/>ClientHeight:" + document.documentElement.clientHeight + "<br/>scrollHeight:" + document.documentElement.scrollHeight;

//捲軸在最底端的時候
if (document.documentElement.scrollHeight == (document.documentElement.scrollTop|document.body.scrollTop)+document.documentElement.clientHeight) {
//到最底端去請求新資料
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);
//載入新的十行資料
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;
}
//刪除前十行資料
for(var i=0;i<10;i++){
table.deleteRow(1);
}
window.scroll(0,parseInt(document.documentElement.scrollTop)-15);//設定捲軸的位置
});
}

//捲軸在最頂端的時候
if((document.documentElement.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);
//載入新的十行資料
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;
}
//刪除後十行資料
for(var i=0;i<10;i++){
table.deleteRow(table.rows.length-1);
}
window.scroll(0,15);//設定捲軸的位置
});
}
}

下邊的代碼是使用Jquery來實現:
//感應捲軸的高度載入新內容
$(window).scroll(function(){
aa=parseInt($(document).height()); //擷取文檔的高度
oo=parseInt($(document).scrollTop()); //擷取捲軸到頂部的垂直高度

if((aa-oo)<800){
if(!window.ia){
ia=1;
$.post("sys.php",{work:"hotels",s:('a=c+d 中國e+f&g>h')},function(msg){//用ajax即時擷取伺服器上的資料
if(msg.length>0){
$("#index #tab5 #tab19").last().after(msg);
ia=null;
}else{
$("#index #div2").last().remove();
$("#index #tab5 #tab19").last().after('<span>Error:沒有搜尋到任何結果,請嘗試更換搜尋條件!</span>');
}
});
}
}
});

擴充閱讀:
Jquery外掛程式 - 可以隨著捲軸的滾動而即時載入圖片
http://hi.baidu.com/see7di/blog/item/3d698352fd0fee170cf3e381.html