2011-11-23 129 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(); 
     });