本文實例講述了jquery滾動載入資料的方法。分享給大家供大家參考。具體分析如下: 我們瀏覽有些網頁的時候,當拉動瀏覽器的捲軸時到頁底時,頁面會繼續自動載入更多內容供使用者瀏覽。這種技術我暫且稱它為滾屏加載技術,我們發現很多網站都用到這種技術,例如新浪微博、QQ空間等。 程式碼如下: 複製程式碼 程式碼如下: html> <br /> $(document).ready(function(){<br /> var range = 50; //距離邊界長度/單位px<br /> var elemt = 500; //插入元素高度/單位px<br /> var maxnum = 20; //設定已載入次數最多<br /> var num = 1;<br /> var totalheight = 0; <br /> var main = $("#content"); //本體元素<br /> $(window).scroll(function(){<br /> var srollPos = $(window).scrollTop(); //捲軸頂部距離(頁面超出視窗的高度)<br /> //console.log("捲軸到上方的垂直高度: " $(document).scrollTop());<br /> //console.log("頁面的文件高度 :" $(document).height());<br /> //console.log('瀏覽器的高度:' $(window).height());<br /> totalheight = parseFloat($(window).height()) parseFloat(srollPos);<br /> if(($(document).height()-range) <= totalheight && num != maxnum) {<br /> main.append("<div style='border:1px solid tomato;margin-top:20px;color:#ac" (num ) (num ) ";height:" elemt "' >hello world" srollPos "--- " num " "); num ; } }); }); this is a scroll test; 頁面下拉自動載入內容 hello world test DIV 希望本文所述對大家的jQuery程式設計有所幫助。