0

I'm using the Infinite Scroll jQuery plugin with Masonry. Each page has about a hundred small images, which is enough to fill an iPad screen, but not nearly enough for something large, like an iMac's screen.

No matter how high I set the bufferPx option when calling infinite scroll, no additional content is loaded, until the viewer starts scrolling. Is there a way I can modify this behaviour, such that infinite scroll loads additional content before the viewer scrolls?

2 Answers 2

0

Well, that's the whole point of an infinite scroller: a viewer scrolls, new content loads. You have a sandbox or a fiddle to show the code you've tried? If you do your reading on http://www.infinite-scroll.com/ you could have found what you need: "In 1.4 you can trigger the loading of the next page of content at will".

1
  • Maybe, pre-populating the image container depending on the browser size (detect device and/or window size) is the way forward? Aug 10, 2012 at 20:57
0

More info would help, but I can provide a simple setup that could ease your qualms.

You can set your infinitescroll object to a variable when you initiate it (for convenience), then target that variable in the callback function in order to get the container height, compare it to the height of the current window, and if it is smaller, you can fire the 'retrieve' method to make it start loading more images. After it fills the screen, it will politely wait for the scroll event as usual.

$infinite = $('#infinitebox');
$infinite.infinitescroll({options}, function() {
    if ( $infinite.height() < $(window).height() ) {
        $infinite.infinitescroll('retrieve');
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.