[英]JQuery Infinite Scroll - “load more” after max page limit reached
I am using this infinite scroll plugin: https://github.com/paulirish/infinite-scroll but 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但由于我有很多页面而浏览器由于内存问题而崩溃,我想实现一个“加载更多”按钮经过如此多的无限滚动页面,如谷歌图片,Twitter和其他应用程序。
I therefore need to stop infinite scrolling when the current page gets to maxPage
and allow the user to select a "Load More" button. 因此,当当前页面达到maxPage
并允许用户选择“加载更多”按钮时,我需要停止无限滚动。 Hopefully solving the memory issues. 希望解决内存问题。
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 maxPage
limit is reached. 我知道其他插件可以做到这一点,但我没有更改插件的选项,因此需要能够在达到maxPage
限制时创建自定义函数。 This is discussed in the link below but I cannot find any further documentation on how to do this exactly. 这将在下面的链接中讨论,但我找不到任何有关如何准确执行此操作的文档。
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'); 加载图像在每个页面向末尾滚动时开始,然后在到达页面5时显示“加载更多”消息,但警告(“加载更多”); 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? 任何人都可以建议我在达到maxpage时创建自定义函数需要做什么? or any other work around for the memory problem? 或任何其他解决内存问题的工作?
// 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. 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无限滚动插件 - 加载和内存问题 ,它与我几天前的赏金相同的问题,所以如果你能解决这个问题,我也会奖励你的赏金;)
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 errorCallback
is called when the max is reached. 似乎表示在达到最大值时调用errorCallback
。 Perhaps you could use this to remove previous DOM content and then continue scrolling. 也许您可以使用它来删除以前的DOM内容,然后继续滚动。
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++;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.