Question

以下代码在每个浏览器中都可以接受每个版本的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;

    }
}

Answer 1

在设置onload属性后，您正在为图像定义src处理程序。做一个在另一个之前。

如果这不能解决你的问题，你真的需要详细说明究竟什么不起作用。

Answer 2

[编辑]

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

[/编辑]

您不必等待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;
...

Answer 3

不要依赖图像的onload-event，如果图像之前已加载并来自缓存，则可能无法触发

预加载图像：仅在IE中出现问题

3 个答案:

[编辑]

[/编辑]