Issue with image load recursive chain on slow network/mobile

So basically I have a page with a few sections. Each sections contains 5-30 image icons that are fairly small in size but large enough that I want to manipulate the load order of them.

I'm using a library called collagePlus which allows me to give it a list of elements which it will collage into a nice image grid. The idea here is to start at the first section of images, load the images, display the grid, then move on to the next section of images all the way to the end. Once we reach the end I pass a callback which initializes a gallery library I am using called fancybox which simply makes all the images interactive when clicked(but does not modify the icons state/styles).

var fancyCollage = new function() { /* A mixed usage of fancybox.js and collagePlus.js */
    var collageOpts = {
        'targetHeight': 200,
        'fadeSpeed': 2000,
        'allowPartialLastRow': true
    };

    // This is just for the case that the browser window is resized
    var resizeTimer = null;
    $(window).bind('resize', function() {
        resetCollage(); // resize all collages
    });

    // Here we apply the actual CollagePlus plugin
    var collage = function(elems) {
        if (!elems)
            elems = $('.Collage');
        elems.removeWhitespace().collagePlus(collageOpts);
    };

    var resetCollage = function(elems) {
        // hide all the images until we resize them
        $('.Collage .Image_Wrapper').css("opacity", 0);
        // set a timer to re-apply the plugin
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            collage(elems);
        }, 200);
    };

    var setFancyBox = function() {
        $(".covers").fancybox({/*options*/});
    };

    this.init = function(opts) {
        if (opts != null) {
            if (opts.height) {
                collageOpts.targetHeight = opts.height;
            }
        }
        $(document).ready(function() {
            // some recursive functional funk
            // basically goes through each section then each image in each section and loads the image and recurses onto the next image or section
            function loadImage(images, imgIndex, sections, sectIndex, callback) {
                if (sectIndex == sections.length) {
                    return callback();
                }
                if (imgIndex == images.length) {
                    var c = sections.eq(sectIndex);
                    collage(c);
                    images = sections.eq(sectIndex + 1).find("img.preload");
                    return loadImage(images, 0, sections, sectIndex + 1, callback);
                }
                var src = images.eq(imgIndex).data("src");
                var img = new Image();
                img.onload = img.onerror = function() {
                    images[imgIndex].src = src; // once the image is loaded set the UI element's source
                    loadImage(images, imgIndex + 1, sections, sectIndex, callback)
                };
                img.src = src; // load the image in the background
            }

            var firstImgList = $(".Collage").eq(0).find("img.preload");
            loadImage(firstImgList, 0, $(".Collage"), 0, setFancyBox);
        });
    }
}

From my galleries I then call the init function.

It seems like my recursive chain being triggered by img.onload or img.onerror is not working properly if the images take a while to load(on slow networks or mobile). I'm not sure what I'm missing here so if anyone can chip in that would be great!

If it isn't clear what is going wrong from the code I posted you can see a live example here: http://ift.tt/2vFHQfS

It works quite well on my desktop, but on my Nexus 5x it does not work and seems like the finally few collage calls are not happening. I've spent too long on this now so opening this up to see if I can get some help. Thanks everyone!