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

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

Wrong:

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

Right:

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