Question

I have the following piece of code that pulls an image URL from a PHP script via ajax, based on a parameter that I pass to this function. The result is the existing image fades out (jQuery), the src attribute gets the new image and the image is faded back in. This is working like charm in Chrome, Firefox etc., however IE9 throws the error:

‘SCRIPT28:Out of stack space’

If I switch IE9 to IE8 or IE7 mode, it works fine, even if the error still shows up, but in IE9 it fails to take off. Where am I going wrong?

function imager(dt){
    $('.ct_img').fadeOut(400);
        var urip = homeURL + '/qwm/CF_QRGR/' + encodeURIComponent(dt) + '/';
        $.ajax({url:urip, success:function(result){
            
            $.doTimeout(400,function(){
                if(result=='0'){
                $('.ct_img').attr('src',homeURL + '/public/img/site/load_fail_message.jpg').bind('load', function (e) {
                    $('.ct_img').fadeIn(400)
                        });
                } else {
                $('.ct_img').attr('src',homeURL + '/public/img/bank/vault/' + result).bind('load', function (e) {
                    $('.ct_img').fadeIn(400)
                        });
                }
                });
                
        }
        });
    
    
}

Answer 1

I suspect it’s an event binding. Does the event binding work without jQuery? Could there be a lot of .ct_img classes around? Because this would replace all their src and maybe that’s overloading it? So here, using ID instead

    var img = document.getElementById( "ct_img");
    img.src = url;
    img.onload = function() {
        $('#ct_img').fadeIn(400);
     };

I don’t know if IE has full stacktraces, but to see if you have recursion, you could console log

 arguments.callee.caller.name.toString()

to see what method is invoking it.