我一直在寻找解决这个问题的方法,非常感谢能够解决这个问题的人。
以下是用于预加载25张图像的函数的简化版本。它在IE9-10和Chrome中运行得非常好。
在IE8中,它通过加载图像(例如10/25)中途停止。如果我然后刷新浏览器它将继续加载图像,需要~3次刷新才能完成。这不应该是必要的!
在奇怪的场合,它确实成功地一次性加载所有图像。我试图避免使用.load(),因为我读过它在IE中可能有问题但在这里我也是一样的!我也尝试使用不同的图像来排除图像格式。
我正在寻找以下代码的修复程序,或者如果有人有代码,则需要更好的解决方案。
非常感谢。
function loadAllImages() {
var imgArray = [ //image SRCs stored in array
'imgsrc01.jpg',
'imgsrc02.jpg',
'imgsrc03.jpg',
...
'imgsrc25.jpg'];
var noFinalImg = imgArray.length - 1;
var i = -1;
var waitTime = 10000;
if (imgArray.length === 0) {
return;
} else {
loadImage();
};
function loadImage() {
i++;
var url = imgArray[i];
var img = new Image();
var timer;
img.src = url;
img.id = "thumb" + i;
// image loaded
if (img.complete || img.readyState === 4) {
//Call image loaded function
console.log(i + "/" + noFinalImg);
//equivalent to loop next
if (i !== noFinalImg) {
loadImage();
};
// image not loaded
} else {
// handle 404 using setTimeout set at waitTime
timer = setTimeout(function () {
if (i !== noFinalImg) {
loadImage();
};
$(img).unbind('error load onreadystate');
}, waitTime);
$(img).bind('error load onreadystatechange', function (e) {
clearTimeout(timer);
if (e.type !== 'error') {
//Call image loaded function
console.log(i + "/" + noFinalImg);
};
if (i !== noFinalImg) {
loadImage();
};
});
};
};
};