预加载图像：仅在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

处理程序。先做一个。 如果那不能解决您的问题，那么您确实需要详细说明什么是行不通的。     ,        不要依赖图像的onload-event，如果图像是在缓存之前加载并且来自缓存的，则可能不会触发     ,        [编辑] 该功能最有可能在下载映像之前结束并再次调用自身，因此不会缓存该映像。将映像加载到一个永久存储的存储区（例如数组）中，直到所有这些存储区都降格并缓存为止。 [/编辑] 您不必等待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];
}

现在，当DOM准备就绪时，您可以使用预加载的映像之一。

...
cat.src = imageArr[bannerCount].src;
...