Wallpress Infinite Scroll

Paul Nitruc
asked 9 years ago

Greetings,

How can we set a delay on the loading of the infinite scroll to ensure that new posts/images only load when the user hits the very bottom of the page?

We’re using the Wallpress theme and having thousands of posts/images load through the infinite scroll feature. Because we have thousands and are on an AWS server, the page loads 30 posts at first and then another 30 each time the infinite scroll loads.

Our problem is that the theme seems to want to load images before the user even reaches the bottom of the page. This creates an issue where every time a user starts to scroll down (or even back up) the infinite scroll loads more posts… and when more posts load the scrolling jumps slightly which makes it not smooth when continually scrolling down.

-Paul

1 Answers

Allen
answered 9 years ago

@Paul : hi you could try open file : wallpress/assets/js/jquery.custom.js, and then go to line 293 , replace the code from line 293 -> 322 with this :

 $(window).scroll(function() {   
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $('#content').infinitescroll({
                loading: {
                finished: undefined,
                finishedMsg: "<em>Oops, no more pages to load.</em>",
                msgText: "<em>Loading more items</em>",
                speed: 'fast',
                img: 'http://i.imgur.com/QrOjF.gif'
                },
                navSelector  : "div.navigation",            
                nextSelector : "div.navigation a:first",    
                itemSelector : "#content div.item"
            },function( newElms) {

                var $newElems = $( newElms ).css({ opacity: 0 });
                // ensure that images load before adding to masonry layout
                $newElems.imagesLoaded(function(){
                    $newElems.animate({ opacity: 1 });
                    // update bricks width
                    updateBrickWidth ($newElems);
                    $container.masonry( 'appended', $newElems, true ); 
                    // trigger scroll again
                    $(window).trigger('scroll');
                    //add_popup();

                    //Reload new item
                    reload_jPlayer();
                    fancyBox();
                    reload_gallery();
                });
        });
    }
});