问题
I am using infinate scroll plugin (by Paul Irish). I want to use custom functions when the next page is loading and when the maxPage is reached.
I have tried the below based on the documentation, however this starts the loading function but doesn't ever call the finished function. Its not calling the next page either when I look in the console. What am I missing?
// Infinite Ajax Scroll configuration
$container.infinitescroll({
navSelector: "div.paginate",
nextSelector: "div.paginate a",
itemSelector: "div.element",
maxPage: 5,
loading: {
start: function(){
alert('started');
},
finished: function(){
alert('finsihed loading');
}
}
},
function(newElements) {
var $newElements = $(newElements).css({opacity: 0});
//remove the first item
$newElements.splice(0, 1);
$container.isotope('appended', $newElements);
}
});
});
The scrolling could go on for pages and pages until the browser crashes due to memory issues, I therefore need to stop infinite scrolling when the current page gets to maxPage and allow the user to select a "Load More" button. Hopefully solving memory issues.
This is discussed in the link below but I cannot find any further documentation on how to do this exactly and cann't even get the above sample to work.
https://github.com/paulirish/infinite-scroll/issues/300
回答1:
First, ensure it works will the minimum options (plus console debug messages):
$container.infinitescroll({
navSelector: "div.paginate",
nextSelector: "div.paginate a",
itemSelector: "div.element",
debug: true
});
If it does, add in options until it breaks.
I recommend debugging the start/finished functions in the console, like this:
loading: {
start: function(){
console.log('started');
},
finished: function(){
console.log('finsihed loading');
}
}
Consider adding the errorCallback
option to debug ajax issues.
来源:https://stackoverflow.com/questions/21237824/jquery-infinite-scroll-plugin-loading-and-memory-issues