图像预加载器陷入IE8

时间:2013-08-15 20:23:04

标签: javascript jquery image internet-explorer-8 preloader

我一直在寻找解决这个问题的方法,非常感谢能够解决这个问题的人。

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

0 个答案:

没有答案