Load Content While Scrolling With jQuery

时间：2011-02-28 来源：李传涛

http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

demo

关键代码及实现思想：

Content structure is like:

<div class="wrdLatest" id=9>content</div>
<div class="wrdLatest" id=8>content</div>

We create a function sending a query to a dynamic file with the DIV ID of the latest wrdLatest DIV (and also put a loader image):

function lastPostFunc() 
{ 
    $('div#lastPostsLoader').html('<img src="bigLoader.gif">');
    $.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last").attr("id"),     

    function(data){
        if (data != "") {
        $(".wrdLatest:last").after(data);            
        }
        $('div#lastPostsLoader').empty();
    });
};

When a user scrolls down, we understand that the scroller is at the bottom with teh function below and fire the lastPostFunc function.

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

相关阅读更多 +