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

Question

我正在研究一个Javascript/jQuery驱动的图像预加载器,并且遇到了一些障碍.虽然目前它提供了基于的进展loaded_images / total_images,但这不是非常准确,因为一个页面可能有一千个1kB图像和一个1MB图像.

我正在寻找一种方法将文件大小合并到进度计算中.现在,我已经研究了捕获给定图像的文件大小的一些(跨浏览器兼容)技巧,并且似乎Ajax请求Content-Length是最可靠的(就准确性而言)如下:

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');

希望我能够把它变成一个插件,一旦我解决它的bug.

Answer 1

看起来类似的问题在这里被提出和回答：

Chrome 中加载 (readyState==3) 时的 XmlHttpRequest.responseText

和这里：

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

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

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