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

现在，我发现这种方法非常有用，因为我可以在发生必要的请求时提供 Initializing 的状态消息。不过我现在的问题有两个方面：

是否有可能捕获给定图像对象加载的字节，可能使用setInterval()定期检查？否则，我会回到挂在大文件上的进度指示器的问题。
如何强制脚本的实际进度计算器等部分等待必要的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 loading (readyState==3) in Chrome

在这里：

Comet Jetty/Tomcat, having some browser issues with Firefox and Chrome

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

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

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

1 个答案: