Max call stack size when trying to connect load to img using jQuery
I have a simple image that I select with (I also tried on()
and one()
):
$container.find('.thumbnail img').load(function(){
$container.trigger('resize');
});
For some reason I am getting Uncaught RangeError: Maximum call stack size exceeded
. I am loading these images from an S3 instance if it matters. I know it redirects multiple times, but I don't think it matters.
Has anyone come across this or something similar. I don't feel like this will never be an endless loop. It also happens intermittently, which is more confusing.
Resize Material:
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);
}
};
source to share
A couple of days after debugging, I finally discovered the problem. The problem is that a developer on the Rails side a few months ago, Paul Ireland, who redid an internal jQuery method special.add
that completely broke any stuff img.load()
. The snippet looks like this (and it is deployed globally in fact, but does not 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 codebase that uses jQuery and you get overruns in the call stack when trying to load an image, this shim was probably added at some point.
source to share