jquery瀏覽器滾動加載技術(shù)實(shí)現(xiàn)方案
要知道，數(shù)據(jù)量增加很頻繁時，要通過定位頁碼來找到目標(biāo)數(shù)據(jù)似乎并沒有什么意義。我覺得用戶體驗(yàn)成熟的WEB應(yīng)用程序應(yīng)當(dāng)引導(dǎo)用戶使用TAG或搜索等功能來找到目標(biāo)數(shù)據(jù)。至于瀏覽數(shù)據(jù)，尤其是瀏覽最新的數(shù)據(jù)，利用瀏覽器滾動條來加載，是很好的嘗試……
我試著用jquery來實(shí)現(xiàn)這個功能。先要得到滾動條的總長屬性值：scrollHeight，還有滾動條當(dāng)前位置屬性值：scrollTop。然后通過計算，若當(dāng)前值位于總長值三分之二時加載新數(shù)據(jù)。假設(shè)DOM上有一個元素為<div id=”mypage”></div>，該元素overflow樣式為scroll，也就是元素中的內(nèi)容溢出元素指定高度時啟用滾動條。利用jquery的load方法為元素加載一個已經(jīng)存在的文件，我假設(shè)它是table.html。這個文件的內(nèi)容可以是足以使瀏覽器滾屏的一張數(shù)據(jù)表。
<script type=”text/javascript” src=”jquery.js“>//加載jquery庫</script>
<script type=”text/javascript”> gh
var hght=0;//初始化滾動條總長
var top=0;//初始化滾動條的當(dāng)前位置
$(document).ready(function(){//DOM的onload事件
$(”#mypage”).load(”table.html”);//table.html的內(nèi)容被加載到mypage元素
$(”#mypage”).scroll( function() {//定義滾動條位置改變時觸發(fā)的事件。
hght=this.scrollHeight;//得到滾動條總長，賦給hght變量
top=this.scrollTop;//得到滾動條當(dāng)前值，賦給top變量
});
});
setInterval(”cando();”,2000);//每隔2秒鐘調(diào)用一次cando函數(shù)來判斷當(dāng)前滾動條位置。
function cando(){
if(top>parseInt(hght/3)*2)//判斷滾動條當(dā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ù)滾動條總長，因?yàn)?(”#mypage”).scroll事件一觸發(fā)，又會得到新值，不恢復(fù)的話可能會造成判斷錯誤而再次加載……
top=0;//原因同上。
});
}
</script>
<div id=”mypage”></div>
為什么要隔2秒鐘調(diào)用一次判斷呢？因?yàn)橹灰?(”#mypage”).scroll事件一被觸發(fā)，就會影hght和top值，這個值可能總是滿足cando函數(shù)的判斷，也就是top值總是位于hght的三分之二。因此可能會多次加載造成服務(wù)器負(fù)擔(dān)加重。而每加載一次后把hght和top值賦0，也是這個原因。
這段代碼的效果就是只要元素mypage的滾動條位置位于滾動條總長的三分之二時，追加table.html的內(nèi)容到元素mypage中去。當(dāng)然這樣運(yùn)行是無休止地加載下去。在真正的AJAX運(yùn)用中，table.html可以換成asp或php腳本，接收get或post參數(shù)來進(jìn)行處理，然后返回有意義的數(shù)據(jù)。jquery的get方法可以設(shè)置get方式的參數(shù)數(shù)據(jù)，比如：
$.get(”test.php”, { name: “boho”, id: “1″ } );
相當(dāng)于http://localhost/test.php?name=boho&id=1這種形式的http訪問。然后通過get方法的回調(diào)函數(shù)來獲取test.php輸出的內(nèi)容：
$.get(”test.php”, {name:”boho”,id:”1″},function(data){
alert(”Data Loaded: ” + data);
});
相關(guān)文章
jquery通過a標(biāo)簽刪除table中的一行的代碼
刪除table中的一行的方法有很多，在本文為大家介紹下jquery是如何做到的，下面有個不錯的示例，喜歡的朋友可以參考下2013-12-12
jq選項(xiàng)卡鼠標(biāo)延遲的插件實(shí)例
jq選項(xiàng)卡鼠標(biāo)延遲的插件實(shí)例，需要的朋友可以參考一下2013-05-05
js和jQuery設(shè)置Opacity半透明 兼容IE6
對于每一個網(wǎng)站前端開發(fā)人員，常常都會遇到設(shè)置div透明度的需求，比如在實(shí)現(xiàn)圖片幻燈片切換效果經(jīng)常就需要使圖片淡入淡出。本文分別對原生js和jQuery在IE和其它瀏覽器中設(shè)置透明度的方法和相關(guān)注意事項(xiàng)進(jìn)行總結(jié)。2016-05-05
jQuery源碼分析-03構(gòu)造jQuery對象-源碼結(jié)構(gòu)和核心函數(shù)
jQuery源碼分析-03構(gòu)造jQuery對象-源碼結(jié)構(gòu)和核心函數(shù)，需要的朋友可以參考下。2011-11-11
jQuery實(shí)現(xiàn)的動態(tài)伸縮導(dǎo)航菜單實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的動態(tài)伸縮導(dǎo)航菜單,實(shí)例分析了jQuery鼠標(biāo)事件及animate、hide等方法的使用技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jQuery居中元素scrollleft計算方法,結(jié)合實(shí)例形式分析了jQuery獲取及計算頁面滾動元素的相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
JavaScript為我們提供幾種對話框功能，但功能都十分有限；雖然在IE下可以通過模式窗體的方式創(chuàng)建更豐富的對話框功能，但畢竟只有IE得到支持。2008-06-06
利用jQuery實(shí)現(xiàn)一個簡單的表格上下翻頁效果
這篇文章主要給大家介紹了利用jQuery實(shí)現(xiàn)一個簡單的表格上下翻頁效果的相關(guān)資料，文中介紹的很詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
JQuery實(shí)現(xiàn)網(wǎng)頁右側(cè)隨動廣告特效
本文給大家分享的是2則使用jquery實(shí)現(xiàn)網(wǎng)頁右側(cè)隨動廣告特效的代碼，非常的簡單實(shí)用，有需要的小伙伴可以參考下。2016-01-01
jQuery實(shí)現(xiàn)簡單的tab標(biāo)簽頁效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的tab標(biāo)簽頁效果,涉及jQuery簡單元素遍歷與樣式動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-09-09