javascript JQuery 无限滚动 - 达到最大页面限制后“加载更多”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21406777/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Infinite Scroll - "load more" after max page limit reached
提问by LeeTee
I am using this infinite scroll plugin: https://github.com/paulirish/infinite-scrollbut due to the fact I have lots of pages and the browser crashes due to memory issues, I want to implement a "load more" button after so many pages of infinite scrolling like Google images, Twitter and other apps.
我正在使用这个无限滚动插件：https: //github.com/paulirish/infinite-scroll但由于我有很多页面并且浏览器由于内存问题而崩溃，我想实现一个“加载更多”按钮经过如此多的无限滚动页面，例如 Google 图片、Twitter 和其他应用程序。
I therefore need to stop infinite scrolling when the current page gets to maxPageand allow the user to select a "Load More" button. Hopefully solving the memory issues.
因此，我需要在当前页面到达时停止无限滚动maxPage并允许用户选择“加载更多”按钮。希望能解决内存问题。
I know other plugins do this but I do not have the option to change plugins and so need to be able to create a custom function for when the maxPagelimit is reached. This is discussed in the link below but I cannot find any further documentation on how to do this exactly.
我知道其他插件会这样做，但我没有更改插件的选项，因此需要能够在maxPage达到限制时创建自定义函数。这在下面的链接中进行了讨论，但我找不到有关如何准确执行此操作的任何进一步文档。
https://github.com/paulirish/infinite-scroll/issues/300
https://github.com/paulirish/infinite-scroll/issues/300
I have tried the below code based on the documentation. The loading image starts as each page scrolls towards the end and then shows the 'load more' message when page 5 is reached but the alert('load more'); is activated on every page, not ont he last page. can anyone suggest what I need to do to create a custom function when the maxpage is reached? or any other work around for the memory problem?
我已经根据文档尝试了以下代码。当每个页面滚动到末尾时加载图像开始，然后在到达第 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. This other post belongs to me: jquery infinite scroll plugin - loading and memory issues, its the same issue which I put a bounty on days ago, so if you can resolve this I will also reward you with the bounty ;)
附注。另一篇文章属于我：jquery 无限滚动插件 - 加载和内存问题，这与我几天前悬赏的问题相同，所以如果你能解决这个问题，我也会用悬赏奖励你；）
采纳答案by S..
Try changing your code like this, so that you increment a counter each time you load content, and check that counter hasn't reached a certain value before adding more content.
尝试像这样更改您的代码，以便在每次加载内容时增加一个计数器，并在添加更多内容之前检查计数器是否未达到某个值。
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++;
}
});
回答by Owlvark
Looking at the plugin code, this line in _showdonemsg:
查看插件代码，这一行在_showdonemsg：
// user provided callback when done
opts.errorCallback.call($(opts.contentSelector)[0],'done');
seems to indicate errorCallbackis called when the max is reached.
Perhaps you could use this to remove previous DOM content and then continue scrolling.
似乎表示errorCallback在达到最大值时调用。也许您可以使用它来删除以前的 DOM 内容，然后继续滚动。
