Load Content While Scrolling With jQuery

转贴标记：

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();

        }

});