Question

我正在尝试缓存几百个相当大的图像（每个图像大约是2000x2500,350KB），以便在Web应用程序中显示。我的基本过程是为每个创建一个Image对象，设置它的src，然后等待它下载。然后使用Image对象在应用程序需要时加载图像。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    var countSpan, errorSpan;
    var imageArray = new Array();

    var index = 0;
    var imageCount = 199;
    var concurrent = 4;

    var count = 0;
    var error = 0;

    function runTest() {
        countSpan = document.getElementById('countSpan');
        errorSpan = document.getElementById('errorSpan');
        next(); 
    }

    function next() {
        while (index < imageCount && concurrent > 0) {
            downloadImage('images/' + index + '.jpg', index);
            index++;
        }
        countSpan.innerHTML = count;
        errorSpan.innerHTML = error;
    }

    function downloadImage(src, index) {
        concurrent--;
        var image = new Image();
        imageArray[index] = image;
        image.onload = function() {
            concurrent++;
            count++;
            next();
        }
        image.onerror = function() {
            concurrent++;
            error++;
            next();
        }
        image.src = src;
    }
</script>
</head>

<body onload='runTest()'>
    <p>Downloaded: <span id='countSpan'></span></p>
    <p>Errors: <span id='errorSpan'></span></p>
</body>
</html>

这适用于Firefox，Chrome，Safari和IE9。但是，IE10将在中途中止连接。例如，如果我尝试下载200个这样的图像，IE10将下载100个（约35MB的数据），然后在剩余的100个上输出错误。网络捕获选项卡将连接显示为已中止。我看到iexplore.exe进程打开TCP连接，然后在图像开始出错时立即关闭它们。

如果我尝试下载200张较小的图像（640x480，~45KB），它可以正常工作。

如果我不坚持对图像的引用

// imageArray[index] = image;

IE10下载所有200张图片。但这违背了目的。

在我看来IE10对图像引用有一个大小限制。但我找不到任何文档来支持这一点。如果您可以提供指向此限制的文档的链接或提供解决方法，我们将不胜感激。

IE10中止图像下载

0 个答案: