相关疑难解决方法(0)

我正在研究一个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 …