Full pre-loaded JSON

[bite-your-idols]

Is there any way of use infinite scroll without calling URLS? I mean I have a full JSON loaded in my app (no pagination available) but I want to show it as user scrolls down using masonry. I have a "pagination" method by parsing and splitting this JSON in html snippets saved in js for each "page" but I can't make it work with infinite-scroll since it is expecting a URL...

[desandro]

Is there any way of use infinite scroll without calling URLS?

Yes! You can use Infinite Scroll v3's scrollThreshold event to check when you've reached close to the bottom.

var $container = $('.container').infiniteScroll({
  // path is required, hack with {{#}}
  path: 'page{{#}}',
  loadOnScroll: false,
});

// create & append HTML on scrollThreshold event
$container.on( 'scrollThreshold.infiniteScroll', function() {
  var postsHTML = getPostHTML() + getPostHTML() + getPostHTML();
  $container.append( postsHTML );
});

See demo https://codepen.io/desandro/pen/6c58dd231fee361558c6a3764dc355c1

[bite-your-idols]

awesome! thanks, that is exactly what I needed.

[macsupport]

@bite-your-idols Any chance you could post your code utilizing json?

[bite-your-idols]

it is part of a huge project but the steps are these:
1- get json using jquery&ajax
2- parse this data with jquery into html structure that is pushed into javascript array. Every defined itemsPerPage number I push into the array, so I have every "page" into an array position.
3- using a function for pagination y add pages with infinitescroll as example above.

Maybe it is a cleaner or better way but this works ok. I hope this helps you.

[santyas]

@bite-your-idols great steps! and How do you add imagesLoaded inside scrollThreshold event? or where would you use it when it has 700 img using a unique json?