最近做了一個(gè)需要無限加載的項(xiàng)目，為了避免頁面加載耗時(shí)過長(zhǎng)，我使用了jquery的ajax方法來實(shí)現(xiàn)無限加載。

首先，在頁面加載時(shí)，我們需要先加載第一頁的數(shù)據(jù)，并將下一頁的url存儲(chǔ)到一個(gè)隱藏的input里。

$(function(){
$.ajax({
url: "url_of_first_page",
success: function(data){
$('div.result').append(data); //將第一頁數(shù)據(jù)放入result容器
var next_page_url = $(data).find('div.next_page_url').text(); //從返回的數(shù)據(jù)中獲取下一頁的url
$('input.next_page_url').val(next_page_url); //將下一頁的url存入隱藏的input中
}
});
});

然后，我們需要監(jiān)聽滾動(dòng)事件，在滾動(dòng)到頁面底部時(shí)，使用ajax請(qǐng)求下一頁數(shù)據(jù)，并將下一頁的url再次存儲(chǔ)到隱藏的input中。

$(window).scroll(function(){
var scroll_top = $(this).scrollTop(); //獲取當(dāng)前滾動(dòng)條位置
var document_height = $(document).height(); //獲取頁面總高度
var window_height = $(this).height(); //獲取窗口高度
if(scroll_top == document_height - window_height){ //判斷是否到達(dá)頁面底部
var next_page_url = $('input.next_page_url').val(); //獲取下一頁的url
$.ajax({
url: next_page_url,
success: function(data){
$('div.result').append(data); //將下一頁數(shù)據(jù)放入result容器
var next_next_page_url = $(data).find('div.next_page_url').text(); //從返回的數(shù)據(jù)中獲取下下一頁的url
$('input.next_page_url').val(next_next_page_url); //將下下一頁的url存入隱藏的input中
}
});
}
});

最后，記得在ajax請(qǐng)求前，顯示“加載中”的提示，并在ajax請(qǐng)求結(jié)束后，隱藏提示。

$(document).ajaxStart(function(){
$('div.loading').show();
}).ajaxStop(function(){
$('div.loading').hide();
});

這樣，就可以實(shí)現(xiàn)無限加載了。