2012-02-12 104 views
2

我正在使用jquery masonry無限滾動腳本。分頁下一頁正在重複加載。我怎樣才能阻止它?當我每次滾動頁面時都重複附加分頁內容,而不是顯示諸如「沒有更多內容加載」的消息。jQuery Masonry無限滾動不會停止

$(function(){ 
    // alert($('.pin_item').length); 

    var $alpha = $('#alpha');   
    $alpha.masonry({ 
     itemSelector: '.pin_item', 
     columnWidth: 230, 
     //isAnimated: true 
    }); 

    $alpha.infinitescroll({ 
     navSelector : '#page-nav', // selector for the paged navigation 
     nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) 
     itemSelector : '.pin_item',  // selector for all items you'll retrieve 
     bufferPx  : 50, 

     loading: { 

      finishedMsg: 'No more pages to load.', 
      img: 'http://i.imgur.com/6RMhx.gif' 
     } 
     }, 

     // trigger Masonry as a callback 
     function(newElements) { 
     // hide new items while they are loading 
     var $newElems = $(newElements).css({ opacity: 0 }); 
     // ensure that images load before adding to masonry layout 
     $newElems.imagesLoaded(function(){ 
      // show elems now they're ready 
      $newElems.animate({ opacity: 1 }); 
      $alpha.masonry('appended', $newElems, true); 
     }); 
     } 
    ); 

}); 

回答

-2

砌體無限滾動腳本正在加載您的根頁面文件夾中的頁面。 所以,如果你想只加載一個頁面,只需刪除此文件夾中的其他HTML頁面。 文件夾名稱:頁面。 頁面的名稱:2.html,3.html,4.html,....

因此,刪除頁面(3.html,4.html,如果你發現更多隻是刪除它們),只是保持該頁面(2.html)。

享受。

1

我遇到了同樣的問題。這是你的404頁面沒有找到的問題。一旦頁面用完,大多數CMS將返回最後一個有效的分頁內容。當「下一頁」鏈接調用不存在的頁面時,您需要將後端配置爲拋出404。

要確認這是您的問題,請嘗試更改您在網址中的號碼。即如果您有5頁,第五頁是www.example.com/category/page?id=5,請嘗試訪問www.example.com/category/page?id=99。它應該填充與最後一個有效頁面相同的內容(在本例中爲第5頁)

您正在使用哪個CMS?

+0

我有這個問題與警予,就像你說的它傳遞的最後一個現有的頁面後返回最後一頁。你知道我怎麼能用yii解決這個問題嗎? – 2012-08-06 12:25:59

+0

好吧,我明白,如果在分頁yii設置validateCurrentPage爲false,那麼它工作正常與jQuery的石工。 – 2012-08-06 12:42:27

0

這裏是一個簡單的例子,我在我的代碼中使用.. 我設置全局變量和基於我發現我的數據是否完全加載或沒有..如果我得到數據空它意味着所有的內容是加載,我設置停止負載變量爲1

假設DOM是d形式的..

<div class="results_list"> 
    <ul id="divid"> 
<li class="results">data...</li> 
<li class="results">data...</li> 
</ul> 
</div> 
<script> 
$(document).ready(function() { 
    window.load_start = 0; 
    window.load_stop = 0; 
$(".results_list").scroll(function(){ 
    if(window.load_stop != 1) { 
     if($('.results').hasClass('last')) { 
      $('.results').removeClass('last'); 
     } 
     window.load_start += 40; 
     //40.. to load items from 40.. if u hav loaded 40 items a time before.. 
     $.ajax({ 
      url:"/url.php", 
      data:"action=params+"&lazyload=1&start_load="+window.load_start, 
      method:"GET", 
      success: function(data) { 
       data = $.trim(data); 
     //data is in the form of html.. <li class="results">hi load item from -  start_load i.e., passed in params by ajax.. above </li> 
       if(data == undefined || data == '') { 
        window.load_stop = 1; 
        return false; 
       } 
       $('#divid').append(data); 
      } 
     }); 
    } 
}); 
}); 
</script> 
//u can add a condition to send ajax call(load items) only on scrolling down the div. 
</code>