JQuery頁(yè)面隨滾動(dòng)條動(dòng)態(tài)加載效果的示例分析

這篇文章給大家分享的是有關(guān)JQuery頁(yè)面隨滾動(dòng)條動(dòng)態(tài)加載效果的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧。

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

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

jquery.js“>// 加載jquery庫(kù)

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

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

setInterval(”cando();”,2000);//每隔2秒鐘調(diào)用一次cando函數(shù)來(lái)判斷當(dāng)前滾動(dòng)條位置。

function cando(){
if(top>parseInt(hght/3)*2)//判斷滾動(dòng)條當(dāng)前位置是否超過總長(zhǎng)的2 /3，parseInt為取整函數(shù)
show();//如果是，調(diào)用show函數(shù)加載內(nèi)容。
}

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

為什么要隔2秒鐘調(diào)用一次判斷呢？因?yàn)橹灰?(”#mypage”).scroll事件一被觸發(fā)，就會(huì)影hght和top值，這個(gè)值可能總是滿足cando 函數(shù)的判斷，也就是top值總是位于hght的三分之二。因此可能會(huì)多次加載造成服務(wù)器負(fù)擔(dān)加重。而每加載一次后把hght和top值賦0，也是這個(gè)原因。

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

比如：

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

相當(dāng)于http://hostlocal/test.php?name=boho&id=1

這種形式的http訪問。然后通過get方法的回調(diào)函數(shù)來(lái)獲取test.php輸出的內(nèi)容：

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

感謝各位的閱讀！關(guān)于“JQuery頁(yè)面隨滾動(dòng)條動(dòng)態(tài)加載效果的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！