Function doesn't work as it should in IE7 & IE8 when invoked from a setTimeout

Question

I've got this crazy javascript issue with IE7 and IE8. The function expression below loads some images. That's it. quite simple. When the function is invoked directly ie testmypatience() it works as it should but if I call it from inside a timeout it won't load the images. The function is invoked but the images won't load. It also fails to work when invoked by the jQuery animate callback.

I've tried everything and i can't get it to work so you help would be most appreciated.

var testmypatience = function($active){
                var arr = ['images/site/products-medium/m_cordial_pomegranateelderflower.png', 'images/site/products-medium/m_cordial_spicedberry.png', 'images/site/products-medium/m_cordial_strawberryelderflower.png', 'images/site/products-medium/m_750presse_coxsapple.png', 'images/site/products-medium/m_party_appleandelderflower.png', 'images/site/products-medium/m_squeezy_blackcurrentandapple.png', 'images/site/products-medium/m_270presse_cranberryandorange.png', 'images/site/products-medium/m_270presse_elderflower.png', 'images/site/products-medium/m_270presse_gingerlemongrass.png'];
                for (i = 0; i < arr.length; i++) {
                    var img, len;
                    img = new Image();
                    img.src = arr[i];

                    img.onload = function(){
                        console.log('done ' + this.src);
                    }
                }
            }

//this works
testmypatience()

//None of these work
    setTimeout(function(){
       testmypatience()
    }, 400)

    setTimeout(testmypatience, 400)

    jQuery('elm').animate({left:'1000px'},
    {
       duration:200,
       complete: testmypatience
    });

Answer 1

IE7 and 8 don't have a console unless you installed a browser extension/plugin for that. Comment the lines with the console.log calls or use something like FireBug Lite

Also as pimvdb says, the 1000px should be in quotes (without quotes it breaks in all browsers, it's invalid javascript syntax).

Answer 2

You don't need to do it as complicated as you do in your solution. Just swap the assignment of src and onload .

Wrong:

img = new Image();
img.src = arr[i];
img.onload = function(){ ... }

Right:

img = new Image();
img.onload = function(){ ... }
img.src = arr[i];

Answer 3

I've sorted it. I have to insert an empty image object into the dom first and then give it a src attribute and only then will it fire the onload event in IE7 and 8. Please feel free to ask any questions if I've been a bit vague and I will answer all your questions.

$(function(){
                var testmypatience = function($active){
                    var arr = ['images/site/products-medium/m_cordial_pomegranateelderflower.png', 'images/site/products-medium/m_cordial_spicedberry.png', 'images/site/products-medium/m_cordial_strawberryelderflower.png', 'images/site/products-medium/m_750presse_coxsapple.png', 'images/site/products-medium/m_party_appleandelderflower.png', 'images/site/products-medium/m_squeezy_blackcurrentandapple.png', 'images/site/products-medium/m_270presse_cranberryandorange.png', 'images/site/products-medium/m_270presse_elderflower.png', 'images/site/products-medium/m_270presse_gingerlemongrass.png'];
                    for (i = 0; i < arr.length; i++) {
                        var img, len;
                        img = new Image();
                        $(img).prependTo('body');

                        img.onload = function(){
                            console.log('done ' + this.src);
                        }
                    }

                    $('img').each(function(i, elm){
                        elm.src = arr[i];
                    })
                }

                setTimeout(function(){
                    testmypatience()
                }, 400)
            })