無限滾動問題

Question

我正在使用jQuery在我的webiste上實現所謂的「無限滾動」效果。它目前工作正常，但我有一個問題。也就是說，雖然數據庫行結束，但如果滾動條向下，它仍然會抓取數據，在這種情況下，數據不存在。我想要的是，一旦數據庫行結束，即使滾動條向下，它也不應該獲取數據。

<script type="text/javascript"> 
$(document).ready(function() { 
    var message_count = <? php echo $message_count; ?> ; 
    var loaded_messages = 0; 

    function last_msg_funtion() { 
     $('div#more_button').html('<img src="./assets/img/loader.gif">'); 
     loaded_messages += 10; 
     $.get("/flick/load_more_message/" + loaded_messages, function (data) { 
      $("#load_more_message").append(data); 
     }); 

     if (loaded_messages >= message_count - 10) { 
      $("#more_button").hide(); 
      //alert('hide'); 
     } 

    }; 


    $(window).scroll(function() { 
     if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
      last_msg_funtion(); 
     } 
    }); 
}); 
</script> 

Answer 1

我想你可以試試這個

$(window).scroll(function(){ 
    if(loaded_messages < message_count) 
    { 
     if ($(window).scrollTop() == $(document).height() - $(window).height()){ 
      last_msg_funtion(); 
     } 
    } 
}); 

Answer 2

呼籲更多的數據之前，請檢查（而不只是隱藏按鈕）

function last_msg_funtion() { 
    if (loaded_messages < message_count) { // ADDED THIS CHECK 
     $('div#more_button').html('<img src="./assets/img/loader.gif">'); 
     loaded_messages += 10; 

     $.get("/flick/load_more_message/" + loaded_messages, function (data) { 
      $("#load_more_message").append(data); 
     }); 

     if (loaded_messages >= message_count - 10) { 
      $("#more_button").hide(); 
      //alert('hide'); 
     } 
    } 
};