Infinite scroll broken when not enough images are loaded (e.g. big monitors)

[fxkr]

Infinite scroll as shown on the example page doesn't work properly when after the initial load[1] not enough images are present that the viewport isn't at the bottom anymore - in other words, when loading a single batch of images isn't enough.

To reproduce, you can just open https://miromannino.github.io/Justified-Gallery/endless-scroll/ on a big monitor. See the screenshot below (on a 1920x1200 monitor). Notice the lack of a scrollbar, and only a few images being shown. Spacebar / scrollwheel do nothing.

In my project, my workaround involves a counter of how many images still need to be loaded. I trigger loadMore on page load to load the initial batch of images. And within loadMore, after adding an image:

state.remainingLoading++;
$(img).on("load", () => {
   state.remainingLoading--;
   if (state.remainingLoading == 0 && isScrolledToBottom()) {
       window.setTimeout(loadMore, 0);
   }
});

Is there a better solution?

[1] (or a scroll load, probably. maybe the problem could be triggered that way if the max page size is small, the monitor is wide and the previous row wasn't complete?)

[biziclop]

Paste this code to the console at:

https://miromannino.github.io/Justified-Gallery/endless-scroll/

var $gallery = $('#endless-gallery');

function checkGalleryBottom(){
  var controller = $gallery.data('jg.controller');
  var settings = controller.settings;
  if( $gallery.offset().top + $gallery.height() - settings.rowHeight <= $(window).scrollTop() + $(window).height() )
    addSomeImages(5);
}

$(window).scroll( checkGalleryBottom );

$gallery.justifiedGallery().on('jg.complete jg.resize', checkGalleryBottom );

checkGalleryBottom();

[fxkr]

Works. Cleaner than my approach too. Thanks!