1

我一直在寻找解决这个问题的方法，非常感谢任何能提供一些启示的人。

下面是用于预加载 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();
                };
            });
        };
    };
};
4

0 回答 0