CODEWITHSUNDEEP
javascriptinternet-explorer
Q_Mlilo
Q_Mlilo

Reputation: 1787

Internet Explorer loop bug when preloading images

I have created a JavaScript application that requires all images to be preloaded first. Everything works fine in Firefox but in Internet Explorer my loop skips the count at 19 and goes to 21. Has anyone come across this problem before and what causes it?

You can copy and paste the script below for test purposes.

var preLoad = function () {
    var docImages = ["http://www.sanatural.co.za/media/images/map/rsa_prov.gif", "http://www.sanatural.co.za/media/images/map/loading.gif", "http://www.sanatural.co.za/media/images/map/loading2.gif", "http://www.sanatural.co.za/media/images/map/ec_land.gif", "http://www.sanatural.co.za/media/images/map/ec_roll.gif", "http://www.sanatural.co.za/media/images/map/ec_state.gif", "http://www.sanatural.co.za/media/images/map/fs_land.gif", "http://www.sanatural.co.za/media/images/map/fs_roll.gif", "http://www.sanatural.co.za/media/images/map/fs_state.gif", "http://www.sanatural.co.za/media/images/map/gt_land.gif", "http://www.sanatural.co.za/media/images/map/gt_roll.gif", "http://www.sanatural.co.za/media/images/map/gt_state.gif", "http://www.sanatural.co.za/media/images/map/kzn_land.gif", "http://www.sanatural.co.za/media/images/map/kzn_roll.gif", "http://www.sanatural.co.za/media/images/map/kzn_state.gif", "http://www.sanatural.co.za/media/images/map/lp_land.gif", "http://www.sanatural.co.za/media/images/map/lp_roll.gif", "http://www.sanatural.co.za/media/images/map/lp_state.gif", "http://www.sanatural.co.za/media/images/map/mp_land.gif", "http://www.sanatural.co.za/media/images/map/mp_roll.gif", "mp_state.gif", "http://www.sanatural.co.za/media/images/map/nc_land.gif", "http://www.sanatural.co.za/media/images/map/nc_roll.gif", "http://www.sanatural.co.za/media/images/map/nc_state.gif", "http://www.sanatural.co.za/media/images/map/nw_land.gif", "http://www.sanatural.co.za/media/images/map/nw_roll.gif", "http://www.sanatural.co.za/media/images/map/nw_state.gif", "http://www.sanatural.co.za/media/images/map/wc_land.gif", "http://www.sanatural.co.za/media/images/map/wc_roll.gif", "http://www.sanatural.co.za/media/images/map/wc_state.gif"],
        imageFolder = [],
        loaded = [],
        loadedCounter = 0;

    this.loadImgs = function () {
        for (var i = 0; i < docImages.length; i++) {
            imageFolder[i] = new Image();
            imageFolder[i].src = docImages[i];
            loaded[i] = false;
        }
        intervalId = setInterval(loadedCheck, 10); //  
    };

    function loadedCheck() {
        if (loadedCounter == imageFolder.length) { // all images have been preloaded 
            clearInterval(intervalId);
            alert('All images have been preloaded!');
            return;
        }

        for (var i = 0; i < imageFolder.length; i++) {
            if (loaded[i] === false && imageFolder[i].complete) {
                loaded[i] = true;
                loadedCounter++;
                alert(i); // (work fine in FF but i.e goes from 19 to 21 )
            }
        }
    }
};


var preloadObject = new preLoad();

preloadObject.loadImgs();

Upvotes: 0

Views: 362

Answers (1)

Sean Kinsey
Sean Kinsey

Reputation: 38046

The reason for this is that the item on index 20 is "mp_state.gif" - its missing the complete url. Because of this the image isn't loaded, the .complete property is set to false, and so the loop skips this item.

Upvotes: 3

Related Questions