JQuery頁面隨滾動條動態加載效果的示例分析

這篇文章給大家分享的是有關JQuery頁面隨滾動條動態加載效果的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

Google閱讀器上有一個AJAX scollLoad效果很不錯，就是閱讀項目時不需要翻頁，瀏覽器滾動條往下拉到一定位置時自動加載新的一批項目進來，一直到所有項目加載完為止。要知道，數據量增加很頻繁時，要通過定位頁碼來找到目標數據似乎并沒有什么意義。我覺得用戶體驗成熟的WEB應用程序應當引導用戶使用TAG或搜索等功能來找到目標數據。至于瀏覽數據，尤其是瀏覽最新的數據，利用瀏覽器滾動條來加載，是很好的嘗試……

我試著用jquery來實現這個功能。先要得到滾動條的總長屬性值：scrollHeight，還有滾動條當前位置屬性值：scrollTop。然后通過計算，若當前值位于總長值三分之二時加載新數據。假設DOM上有一個元素為，該元素overflow樣式為scroll，也就是元素中的內容溢出元素指定高度時啟用滾動條。利用jquery的load方法為元素加載一個已經存在的文件，我假設它是table.html。這個文件的內容可以是足以使瀏覽器滾屏的一張數據表。

jquery.js“>// 加載jquery庫

var hght=0;//初始化滾動條總長
var top=0;//初始化滾動條的當前位置
$(document).ready(function() {//DOM的onload事件
$(”#mypage”).load(”table.html”);//table.html的內容被加載到 mypage元素

$(”#mypage”).scroll( function() {//定義滾動條位置改變時觸發的事件。
hght=this.scrollHeight;//得到滾動條總長，賦給hght變量
top=this.scrollTop;//得到滾動條當前值，賦給top變量
});
});

setInterval(”cando();”,2000);//每隔2秒鐘調用一次cando函數來判斷當前滾動條位置。

function cando(){
if(top>parseInt(hght/3)*2)//判斷滾動條當前位置是否超過總長的2 /3，parseInt為取整函數
show();//如果是，調用show函數加載內容。
}

function show(){
$.get(”table.html”, function(data){//利用jquery的get方法得到table.html內容
$(”#mypage”).append(data);//用append方法追加內容到mypage元素。
hght=0;//恢復滾動條總長，因為$(”#mypage”).scroll事件一觸發，又會得到新值，不恢復的話可能會造成判斷錯誤而再次加載……
top=0;//原因同上。
});
}

為什么要隔2秒鐘調用一次判斷呢？因為只要$(”#mypage”).scroll事件一被觸發，就會影hght和top值，這個值可能總是滿足cando 函數的判斷，也就是top值總是位于hght的三分之二。因此可能會多次加載造成服務器負擔加重。而每加載一次后把hght和top值賦0，也是這個原因。

這段代碼的效果就是只要元素mypage的滾動條位置位于滾動條總長的三分之二時，追加table.html的內容到元素mypage 中去。當然這樣運行是無休止地加載下去。在真正的AJAX運用中，table.html可以換成asp或php腳本，接收get或post參數來進行處理，然后返回有意義的數據。jquery的get方法可以設置get方式的參數數據，

比如：

$.get(”test.php”, { name: “boho”, id: “1″ } );

相當于http://hostlocal/test.php?name=boho&id=1

這種形式的http訪問。然后通過get方法的回調函數來獲取test.php輸出的內容：

$.get(”test.php”, {name:”boho”,id:”1″},function(data){
alert(”Data Loaded: ” + data);
});

感謝各位的閱讀！關于“JQuery頁面隨滾動條動態加載效果的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！