Within the context of my website development project at , I am utilizing a script for infinite scrolling to consolidate multiple pages into one seamless scrolling experience.
I am seeking a solution to hide the loader (the spinning icon) when no additional pages need to be loaded. I attempted to use the following code snippet to detect errors ("
Failed to load resource: the server responded with a status of 404 (Not Found)window.addEventListener('error', function(e) {
$('loading').fadeOut()
}, true);
The code I have implemented to load more content is as follows:
//implementing infinite scrolling
$grid.infinitescroll({
// Element containing pagination links
navSelector: '.pagination',
// Selector for the next page link
nextSelector: '.pagination a',
// Selector for items to retrieve
itemSelector: '.grid-blog',
},
// Callback function executed after retrieving new elements
function(new_elts) {
var elts = $(new_elts).css('opacity', 0);
elts.animate({opacity: 1});
$grid.packery('appended', elts);
$('.target-resize').textfill({
maxFontPixels: 36,
changeLineHeight:false
})
$grid.packery({
itemSelector: '.grid-blog',
gutter: 20,
})
});