JQuery無限滾動 - 在達到最大頁面限制後「加載更多」

我正在使用這個無限滾動插件：但由於事實上我有很多頁面和由於內存問題導致瀏覽器崩潰，我想實現一個「加載更多「按鈕後，像谷歌圖片，Twitter和其他應用程序無限滾動的頁面如此之多。JQuery無限滾動 - 在達到最大頁面限制後「加載更多」

因此，噹噹前頁面到達maxPage並且允許用戶選擇「加載更多」按鈕時，我需要停止無限滾動。希望解決內存問題。

我知道其他插件做到這一點，但我沒有選擇更換插件，因此需要能夠創建自定義函數，以便達到maxPage限制。這在下面的鏈接中討論，但我無法找到任何進一步的文件，如何做到這一點。

https://github.com/paulirish/infinite-scroll/issues/300

我曾嘗試基於文檔下面的代碼。加載圖像隨着每個頁面向末尾滾動而開始，然後在到達頁面5時顯示'加載更多'消息，但是警報（'加載更多'）;在每個頁面上激活，而不是在最後一頁上。任何人都可以建議我需要做什麼來創建一個自定義函數，當maxpage達到？或任何其他解決內存問題的工作？

// Infinite Ajax Scroll configuration 
    $container.infinitescroll({ 
     navSelector: "div.paginate", 
     nextSelector: "div.paginate a", 
     itemSelector: "div.element", 
     maxPage: 5, 
     loading: { 
      finishedMsg: 'Load More', 
      msgText: " ", 
      img: 'public/img/ajax-loader.gif', 
      finished: function(){ 
       alert('finished'); 
      } 

     } 
    }, 
    function(newElements) { 

     var $newElements = $(newElements).css({opacity: 0}); 
     //remove the first item 
     $newElements.splice(0, 1); 

     $container.isotope('appended', $newElements); 

    } 

});

PS。這個帖子屬於我：jquery infinite scroll plugin - loading and memory issues，它是我在前幾天發放的同一個問題，所以如果你能解決這個問題，我也會獎勵你的賞金;）

來源

2014-01-28 LeeTee

+1 ..我需要一個無限的滾動工具Tumblr –

的實際javascript您可以從這裏下載：https://github.com/paulirish/infinite-scroll，但是documetation不是很好.. 。爲什麼我這麼卡住： -/ – LeeTee

非常感謝！我從來沒有能夠找到原始的JS嵌入 - 只是鏈接到其他人的網站，總是死，並在一些隨機點打破我的網頁> _>祝你好運。 –

嘗試改變你的代碼是這樣的，所以您每次加載內容時都會增加計數器，並在添加更多內容之前檢查計數器是否未達到特定值。

var cLoaded = 0, iMyLoadLimit = 5; 

    // Infinite Ajax Scroll configuration 
    $container.infinitescroll({ 
     navSelector: "div.paginate", 
     nextSelector: "div.paginate a", 
     itemSelector: "div.element", 
     maxPage: 5, 
     loading: { 
      finishedMsg: 'Load More', 
      msgText: " ", 
      img: 'public/img/ajax-loader.gif', 
      finished: function(){ 
       alert('finished'); 
      } 

     } 
    }, 
    function(newElements) { 
     if(cLoaded < iMyLoadLimit){ 

      var $newElements = $(newElements).css({opacity: 0}); 
      //remove the first item 
      $newElements.splice(0, 1); 

      $container.isotope('appended', $newElements); 
     } 
     cLoaded++; 
    } 

});

來源

2014-01-28 14:32:48 Sam

它的無限滾動初始化的一部分，所以你可以在輸出它之前操縱返回的內容。所以我基本上獲得了新元素並使用Isotope添加到屏幕上。在文檔中，它顯示瞭如何完成這項工作：https：//github.com/paulirish/infinite-scroll#loading-json-data和https://github.com/paulirish/infinite-scroll/issues/300 – LeeTee

好的，所以我不需要完成的功能或'maxPage'選項設置？我假設你建議我將更多按鈕等的所有代碼添加到回調函數中？這是有道理的，但是，當我添加更多按鈕出現的代碼時，問題只能解決一半，然後會發生什麼情況來解決內存問題？我會重置整個事情嗎？ – LeeTee

如果您不斷地向DOM添加內容，您將慢慢處理內存問題（這對於您正在加載的內容而言會有很大不同）。你如何處理這是一個單獨的問題和使用無限滾動的缺點。你可能會拼接很久以前加載的內容（所以添加新的內容，舊的東西消失），保持最大的DOM。 – Sam

縱觀插件代碼，此行_showdonemsg：

// user provided callback when done 
opts.errorCallback.call($(opts.contentSelector)[0],'done');

似乎表明達到最大時errorCallback被調用。也許你可以用它來刪除以前的DOM內容，然後繼續滾動。

來源

2014-01-28 20:36:40 Owlvark

我曾嘗試刪除以前的頁面，但它造成了留下空白的問題，並導致scoll欄出現奇怪的行爲，所以我的結論僅僅是在達到maxPage後向所有後續頁面添加更多按鈕。但是，我不知道如何實現這一點。 – LeeTee

如何在達到最大值時顯示「加載較舊的頁面」消息，然後用'state.currPage'設置爲'maxPage'加載整個頁面？ – Owlvark

我只是想要加載更多按鈕。我已經看到這個工作在很多網站上，並知道它在其他無限滾動插件上實施，所以它必須相對容易實現 – LeeTee

JQuery無限滾動 - 在達到最大頁面限制後「加載更多」

回答

相關問題