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

我正在研究一个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有一些浏览器问题

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

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