利用無限滾動瓦特/ MySQL數據庫

我找到了一個不錯的AJAX/jQuery的無限滾動的插件（http://hycus.com/2011/03/15/infinite-scrolling-like-new-twitter-with-php-mysql-jquery/），我是能夠很好地塑造我的內容，但我有一個問題 - 它僅調用loadmore。 PHP腳本一次。讓我告訴代碼：利用無限滾動瓦特/ MySQL數據庫

在我的index.php文件：

<script type="text/javascript"> 
    $(window).scroll(function(){ 
     if($(window).scrollTop() == $(document).height() - $(window).height()){ 
      $('div#loadmoreajaxloader').show(); 
      $.ajax({ 
       url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"), 
       success: function(html){ 
        if(html){ 
         $("#postswrapper").append(html); 
         $('div#loadmoreajaxloader').hide(); 
        }else{ 
         $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>'); 
        } 
       } 
      }); 
     } 
    }); 
</script>

本節叫我loadmore.php文件，並將其發送的最後一個帖子的ID。這隻在第一次滾動到頁面底部時起作用，它會從loadmore.php加載條目，但不會再次調用loadmore.php。我loadmore.php文件具有下面的代碼：

<?php 

include('./includes/config.php'); 

if($_GET['lastid']){ 
    $query = 'SELECT * FROM db WHERE id < "'.$_GET['lastid'].'" ORDER BY id DESC LIMIT 0,3'; 
    $result = mysql_query($query); 
    while ($rec = mysql_fetch_object($result)) { 

    [SET MY VARS] 

    ?> 

    [HTML & PHP DISPLAYING MY POST] 

    <?php 
    } 
} 

?>

3個職位，出現第一個Ajax調用來經過長達完美，正是我希望他們用正確的數據顯示的方式。但是我不能在第一場3秀後出現下3個帖子。因此，如果我的index.php中默認有5個帖子，我滾動到底部，ajax調用3個帖子，他們完美地顯示，但是之後沒有任何顯示，即使有大量帖子需要顯示。我的問題在哪裏，ajax/jquery嚮導？

來源

2011-09-20 Andrew

你的「如果」條件既滿足了你第一次滾動。所以本質上，事件被解僱了，而不是當你滾動到頁面底部，而是當你開始滾動時。用下面的代碼替換你的代碼：

<script type="text/javascript"> 
    var loading = false; 

    $(window).scroll(function(){ 
     var h = $('#postswrapper').height(); 
     var st = $(window).scrollTop(); 

     // the following tests to check if 
     // 1. the scrollTop is at least at 70% of the height of the div, and 
     // 2. another request to the ajax is not already running and 
     // 3. the height of the div is at least 500. 
     // You may have to tweak these values to work for you. 
     if(st >= 0.7*h && !loading && h > 500){ 
      loading = true; 
      $('div#loadmoreajaxloader').show(); 
      $.ajax({ 
       url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"), 
       success: function(html){ 
        if(html){ 
         $("#postswrapper").append(html); 
         $('div#loadmoreajaxloader').hide(); 
        }else{ 
         $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>'); 
        } 
        loading = false; 
       } 
      }); 
     } 
    }); 
</script>

來源

2011-09-20 22:46:19 srivani

不工作相當，但我喜歡在那裏的領導。限制它到div高度的70％是什麼意思，並確保div至少爲500？有了這個腳本執行什麼載荷主要內容之後。 – Andrew

我試圖將您的版本更改爲： if（st == $（document）.height（） - $（window）.height（）and！（loading）{ 類型的組合，但是這並不工作... – Andrew

我假設你要加載的數據，您滾動到頁面的底部。 70％的人表示，一旦你滾動了近70％的當前數據，就開始加載更多的數據。 500是因爲，如果div足夠小以至於它適合窗口，則不需要滾動。嘗試刪除h> 500並查看它是如何工作的。 – srivani

上面的代碼示例與下面的mods工作觸發函數在從底部固定的高度？

地址：

var trigger = $('#postswrapper').height() - 250;

而變化：

if (st >= 0.7*h && !loading && h > 500) {

到：

if ((st == trigger) && (!loading) && (h > 500)) {

來源

2012-10-21 22:02:49

利用無限滾動瓦特/ MySQL數據庫

回答

相關問題