3

我正在尝试缓存几百个相当大的图像（每个图像大约为 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 对图像引用有大小限制。但我找不到任何文件来支持这一点。如果您可以提供指向定义此限制的文档的链接或提供解决方法，我们将不胜感激。

4

0 回答 0