Question

I have a simple image i select with (i’ve also try on() and one()):

$container.find('.thumbnail img').load(function(){
  $container.trigger('resize');
});

For some reason tho I get Uncaught RangeError: Maximum call stack size exceeded. I’m loading these images from an S3 instance if that matters. I know it does redirects a few times, but I dont think that’d matter.

Has anyone run into this or something similar. I don’t feel like this should ever be an infinite loop. This also happens intermittently which is more confusing.

The resize stuff:

publicMethod.resize = function (options) {
    if (open) {
        options = options || {};

        if (options.width) {
            settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
        }
        if (options.innerWidth) {
            settings.w = setSize(options.innerWidth, 'x');
        }
        $loaded.css({width: settings.w});

        if (options.height) {
            settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
        }
        if (options.innerHeight) {
            settings.h = setSize(options.innerHeight, 'y');
        }
        if (!options.innerHeight && !options.height && $loaded.find('iframe').length == 0) {
            var $child = $loaded.wrapInner("<div style='overflow:auto'></div>").children(); // temporary wrapper to get an accurate estimate of just how high the total content should be.
            settings.h = $child.height();
            $child.replaceWith($child.children()); // ditch the temporary wrapper div used in height calculation
        }
        if("scrollTop" in options) {
            settings.scrollTop = options.scrollTop;
        }
        $loaded.css({height: settings.h});

        publicMethod.position(settings.transition === "none" ? 0 : settings.speed);
    }
};

Answer 1

After a couple days of debugging this I finally tracked down the issue. The problem is a shim a developer on the Rails side a few months prior by Paul Irish that overrode an internal jQuery special.add method which completely broke any img.load() stuff. The snippet looks like this (and it’s deployed all over the web actually, but doesn’t cause an issue until jQuery 1.6-1.7+

/*
 * Special event for image load events
 * Needed because some browsers does not trigger the event on cached images.

 * MIT License
 * Paul Irish     | @paul_irish | www.paulirish.com
 * Andree Hansson | @peolanha   | www.andreehansson.se
 * 2010.
 *
 * Usage:
 * $(images).bind('load', function (e) {
 *   // Do stuff on load
 * });
 * 
 * Note that you can bind the 'error' event on data uri images, this will trigger when
 * data uri images isn't supported.
 * 
 * Tested in:
 * FF 3+
 * IE 6-8
 * Chromium 5-6
 * Opera 9-10
 */
(function ($) {
    $.event.special.load = {
        add: function (hollaback) {
            if ( this.nodeType === 1 && this.tagName.toLowerCase() === 'img' && this.src !== '' ) {
                // Image is already complete, fire the hollaback (fixes browser issues were cached
                // images isn't triggering the load event)
                if ( this.complete || this.readyState === 4 ) {
                    hollaback.handler.apply(this);
                }

                // Check if data URI images is supported, fire 'error' event if not
                else if ( this.readyState === 'uninitialized' && this.src.indexOf('data:') === 0 ) {
                    $(this).trigger('error');
                }

                else {
                    $(this).bind('load', hollaback.handler);
                }
            }
        }
    };
}(jQuery));

So if you’re working on a large code base that uses jQuery and you’re getting call stack exceeded errors while trying to do an image load, this shim was probably added at some point.