javascript - 预加载图像时 Internet Explorer 循环错误

Question

我创建了一个 JavaScript 应用程序，要求首先预加载所有图像。在 Firefox 中一切正常，但在 Internet Explorer 中我的循环跳过 19 处的计数并转到 21。以前有人遇到过这个问题吗？是什么原因导致的？

您可以复制并粘贴下面的脚本以进行测试。

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

Answer 1

原因是索引 20 上的项目是 "mp_state.gif" - 它缺少完整的 URL。 因此，图像未加载，.complete 属性设置为 false，因此循环会跳过此项。