CODEWITHSUNDEEP
javascriptjquery
screenm0nkey
screenm0nkey

Reputation: 18805

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

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
    });

Upvotes: 0

Views: 643

Answers (3)

RoToRa
RoToRa

Reputation: 38431

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];

Upvotes: 2

screenm0nkey
screenm0nkey

Reputation: 18805

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)
            })

Upvotes: 0

gonchuki
gonchuki

Reputation: 4124

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).

Upvotes: 2

Related Questions