2011-11-23 136 views
0

我有一個頁面加載5行結果,5個點擊。jQuery - 延遲加載功能w /滾動

我想要做的就是在滾動條上顯示5個,就像一個懶惰的加載程序,而不是點擊...感謝任何幫助。

$(function() { 
    initShowMore(); 
    $("span#showMore a.moreResults").click(loadMoreResults); 
}); 

function initShowMore() { 
    var has_more = $("form#data input[name=has_more_results]").val(); 
    if (has_more) { 
    $("table span#showMore").show(); 
    } else { 
    $("table span#showMore").hide(); 
    } 
} 
function loadMoreResults() { 
    if (loading) { 
    return; 
    } 

    loading = true; 

    var has_more = $("form#data input[name=has_more_results]").val(); 
    var page = parseInt($("form#data input[name=page]").val()); 

    var data = gatherQueryParams(); 
    data.page = page + 1; 

    append = true; // global 
    load(data); 
} 

回答

2

您需要掛入scroll事件。從我所知道的情況來看,你的情況相當簡單(例如,你不想加載關於頁面上特定位置的結果),所以希望有一些相當簡單的代碼可以工作。 :)

我已經添加了一個if以查看頁面是否向下滾動得足夠遠,因爲您大概只想在某個點後觸發它。

 $(document).scroll(function() 
     { 
      if ($(document).scrollTop() > $(".someelement").position().top) loadMoreResults(); 
     });