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


Related Posts

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注