通过 Javascript/jQuery 接收的字节数和图像的总字节数

Question

我正在开发一个由 Javascript/jQuery 驱动的图像预加载器，但遇到了一些障碍。虽然目前它提供了基于 loaded_images/total_images 的进度，但考虑到一个页面可能有一千个 1kB 图像和一个 1MB 图像，这并不是很准确。

我正在寻找一种将文件大小合并到进度计算中的方法。现在，我研究了一些（跨浏览器兼容）捕获给定图像的文件大小的技巧，似乎对 Content-Length 的 Ajax 请求是最可靠的（就准确性而言）像这样：

var imageSizeTotal = 0;
var ajaxReqest = $.ajax({
    type: 'HEAD',
    url: 'path/to/image',
    success: function(message){
        imageSizeTotal += parseInt(ajaxRequest.getResponseHeader('Content-Length'));
    }
});

现在，我发现这个方法非常有用，因为我可以在发生必要的请求时提供正在初始化状态消息。然而我现在的问题有两个：

1. 是否有任何方法可以捕获给定图像对象加载的字节，也许使用 setInterval() 定期检查？否则，我又回到了大文件上挂着进度指示器的问题。
2. 如何强制脚本的实际进度计算器等部分等待必要的 Ajax 请求完成（显示初始化或其他），以便它可以继续加载？

另外，这是我当前使用的脚本，它再次根据图像数量计算进度，无论文件大小或收到的字节数如何。

var preloaderTotal = 0;
var preloaderLoaded = 0;
var preloaderCurrent = null;

$('#preloaderCurtain')
    .bind('preloaderStart', function(){
        $(this)
            .show();
        $('*')
            .filter(function(e){
                if($(this).css('background-image') != 'none'){
                    preloaderTotal++;
                    return true;
                }
            })
            .each(function(index){
                preloaderCurrent = new Image();
                preloaderCurrent.src = $(this).css('background-image').slice(5, -2);
                preloaderCurrent.onload = function(e){
                    preloaderLoaded++;
                    if(preloaderLoaded == preloaderTotal - 1){
                        $('#preloaderCurtain')
                            .trigger('preloaderComplete')
                    }
                    $('#preloaderCurtain')
                        .trigger('preloaderProgress')
                };
            });
    })
    .bind('preloaderComplete', function(){
        $(this)
            .fadeOut(500)
        startAnimation();
    })
    .bind('preloaderProgress', function(e){
        $('#preloaderProgress')
            .css('opacity', 0.25 + (preloaderLoaded / preloaderTotal))
            .text(Math.floor((preloaderLoaded / preloaderTotal) * 100) + '%');
    })
    .trigger('preloaderStart');

希望一旦我解决了它的错误，我就能把它变成一个插件。

Answer 1

看起来这里提出并回答了类似的问题：

XmlHttpRequest.responseText while在 Chrome 中加载（readyState==3）

和此处：

Comet Jetty/Tomcat，Firefox 和 Chrome 存在一些浏览器问题

基本上 - .responseText.length 适用于 Firefox 和 iPhone，.responseBody.length 适用于 IE，WebSockets 适用于 Chrome。

第二个线程建议 bayeux/dojo 为您将所有这些封装到更高级别的 API 中，这样您就不必自己编写。