Why does my jQuery function throw a Stack Overflow error in IE 8?

Question

I have a simple function that causes an error in IE 8. The problem does not occur in any other browser, although I have not tested IE 7 or 6.

The exact error is as follows: -

SCRIPT28: Out of stack space jquery.min.js, line 2 character 7498 SCRIPT2343: Qaru at line: 2 

This function:

 function switchImage(size, objid, prefix, fullimage){ if(size !== 'full'){ var image = prefix + size + '/' + size +'_' + fullimage; } else { var image = prefix + size + '/' + fullimage; } $('#' + objid).data('type', size) .append('<img id="preload" src="' + image + '" style="display:none;" />') .find('#preload').load(function(){ $('#' + objid).find('img').attr('src', image); $(this).remove(); }); } 

To give an overview of the use case, I will explain the purpose of this function:

When the user resizes the image (using jqueryUI resizing), the width / height are compared in another function.

Once the image has a certain size, this function is then called, which, as you can see, adds a hidden <img> element to the DOM with the 'src' attribute of the version with a higher image resolution (or lower if the image is reduced by the user.

After it has been loaded, the src attribute of the visible element is updated and the hidden element is deleted.

This turned out to be an excellent dynamic switching of images, as the user resizes them, preserving the image quality throughout the process.

I just can’t understand what causes the problem in IE 8. With the elimination of this function, errors do not occur, and although the error is present, the function still works as it should (although the resizing performance is in any case poor in IE 8).

Any help would be greatly appreciated.

UPDATE: I seem to have solved the original problem by rewriting the function as follows: -

 function switchImage(size, objid, prefix, fullimage){ var $el = $('#' + objid); if(size !== 'full'){ var image = prefix + size + '/' + size +'_' + fullimage; } else { var image = prefix + size + '/' + fullimage; } $el.data('type', size); $('<img id="preload" src="' + image + '" style="display:none;" />') .appendTo($el) .one('load', function(){ $('#' + objid).find('img').attr('src', image); $(this).remove(); }); } 

As you can see, the only real difference is that I use .appendTo () and not .append (), as well as the jQuery.one () method, to ensure that the load event only happens once. Although, since the item was deleted right after that, I don’t understand why this should matter.

I would really be interested to know if anyone can shed light on this so that I can learn to avoid such problems in the future. Greetings.

Answer 1

Your initial function would run directly in an infinite loop if you did not have $(this).remove() . Essentially, you did the src attribute setting for all img tags, including the preload image itself. (replace $(this).remove() with console.log('loaded') and watch it loop endlessly in Firebug)

I would suggest that in IE8, as soon as the attribute is set to the preload image, it first fires the "load" event handler before before , executing the following line, which is $(this).remove() (explaining the stack overflow), in while other browsers could first complete the entire function, thus removing the preload image, which would prevent an endless loop. (This is just an assumption)

The monkey patch in the original version will use .find('img:not(#preload)') instead of .find('img') .

The patch also prevents an infinite loop, because .one() ensures that it .one() only once.

But in the end, I would reorganize the function as follows:

 function switchImage(size, objid, prefix, fullimage){ var $el = $('#' + objid), $image = $el.find('img'), $preload = $('<img>'); if(size !== 'full'){ var image = prefix + size + '/' + size +'_' + fullimage; } else { var image = prefix + size + '/' + fullimage; } $el.data('type', size); $preload .on('load', function () { $image.attr('src', image); }) .attr('src', image); } 

Also note that the preload image does not really have to be explicitly added to the DOM to accomplish your goals.