Javascript 预加载图像：仅在IE中存在问题

下面的代码适用于每个浏览器接受IE的每个版本，请有人帮忙！cat.onload方法似乎有问题……我做了这么多测试，现在不知所措……希望您能提供帮助

谢谢

var bannerCount = 0;
var bannerImgsArr = new Array();
bannerImgsArr[0] ='image1.jpg';
bannerImgsArr[1] ='image2.jpg';
bannerImgsArr[2] ='image3.jpg';
bannerImgsArr[3] ='image4.jpg';

$(document).ready(function() {
  preloadBannerImages();
});

function preloadBannerImages(){
    //create new image object
    var cat = new Image();

    //give Image src attribute the image file name
    cat.src =bannerImgsArr[bannerCount];

    //if the counter represents the last image in the current gallery enter here: 
    if(bannerCount == 3){

        //When the image has been loaded the following function is exicuted 
        cat.onload = function() {
            //Removes the LOADING message hard coded into the html page;
            document.getElementById("bigbox").removeChild(document.getElementById("loading"));
        }

    }else{

        //when current image is finished loading increments the img index and 
        //calls the loading function again for the next image in the gallery

        bannerCount++;
        cat.onload =preloadBannerImages;

    }
}

---

在设置

src

属性之后，您正在为图像定义

onload

处理程序。先做一个再做另一个

如果这不能解决您的问题，那么您确实需要详细说明哪些不起作用。

[编辑] 该函数很可能在下载图像之前结束并再次调用自身，因此图像不会被缓存。将图像加载到一个持久性存储（如数组）中，该存储将一直挂起，直到它们全部被下载和缓存

[/编辑] 您不必等待DOM准备好加载图像：

var bannerCount = 0;
var bannerImgsArr = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg'];
var imageArray = [];

for (var i=0, iLen=bannerImgsArr.length; i<iLen; i++) {
  imageArray[i]  = new Image();
  imageArray[i].src = bannerImgsArr[i];
}

---

不要依赖图像的onload事件，如果图像在加载之前已加载并且来自缓存，则可能不会触发该事件

到底什么不起作用？您遇到了哪些错误？是否错过了

var cat=new Image（）不相关，图像从不存储。使用onload调用函数本身相当于一个循环。对创建的图像对象的引用从未保留，因此IE（可能）不会费心完成下载。因此，至少在图像完成下载之前，必须保留对每个图像对象的引用。而且不需要递归调用，图像可以并行下载。在尝试加载下一个之前，无需等待其中一个的加载事件，浏览器将处理该事件。无需存储它们。。一旦它们加载完毕，浏览器就会缓存它们，并且可以立即使用它们。OP的整个想法是等待图像加载（dom准备就绪后开始加载的图像），以便移除加载进度图像。他希望在加载DOM后加载图像，并希望知道所有动态图像何时完成加载。
...
cat.src = imageArr[bannerCount].src;
...