通过Javascript / jQuery接收的字节数和字节总数的图像 [英] Bytes received and bytes total of images via Javascript/jQuery
问题描述
我正在开发一个Javascript / jQuery驱动的图像预加载器，并且遇到了一些障碍。虽然目前它提供了基于 loaded_images / total_images 的进度，但这不是很准确，因为一个页面可能有一千个1kB图像和一个1MB图像。
I'm working on a Javascript/jQuery powered image preloader, and have hit a bit of a snag. While as of currently it provides the progress based on loaded_images / total_images, this is not very accurate given a page could have a thousand 1kB images, and a single 1MB image.
我正在寻找一种将文件大小合并到进度计算中的方法。现在，我已经研究了捕获给定图像的文件大小的一些（跨浏览器兼容）技巧，似乎Ajax对 Content-Length 的请求是最可靠的（就准确性而言）如下：
I'm looking for a way to incorporate filesize into the progress calculations. Now, I've looked into some (cross browser compatible) tricks at capturing the filesize of a given image, and it seems that Ajax requests for Content-Length were the most reliable (in terms of accuracy) like so:
var imageSizeTotal = 0;
var ajaxReqest = $.ajax({
type: 'HEAD',
url: 'path/to/image',
success: function(message){
imageSizeTotal += parseInt(ajaxRequest.getResponseHeader('Content-Length'));
}
});
现在，我觉得这个方法非常有用，因为我可以提供
Now, I find this method to be quite useful, as I can provide a status message of Initializing while the necessary requests are taking place. However my issue now is two-fold:
- 是否有可能捕获给定图像对象加载的字节，可能使用
setInterval（）定期检查？否则，我有点回到挂在大文件上的进度指示器的问题。 - 如何强制实际进度计算器等部分脚本等到必要的Ajax请求已完成（显示正在初始化或其他什么），所以它可以继续加载？
- Is there any way possible to capture the bytes loaded of a given image object, perhaps using
setInterval()to periodically check? Otherwise, I'm sort of back at the issue of the progress indicator hanging on large files. - How can I force the actual progress calculator, etc., portion of the script to wait until the necessary Ajax requests are completed (displaying Initializing or whatever), so it can go ahead with the loading?
此外，这是我目前使用的脚本，它再次根据图像数量计算进度，无论文件大小或接收的字节数。
Also, here's the script I currently use, which again, calculates progress based on the number of images, regardless of filesize or bytes received.
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 。
Hopefully I'll be able to turn this into a plugin, once I work the bugs out of it.
推荐答案
看起来类似的问题在这里被问到并回答：
It looks like a similar question was asked and answered here:
此处：
Comet Jetty / Tomcat，Firefox和Chrome有一些浏览器问题
基本上 - Firefox和iPhone的.responseText.length，IE的.responseBody.length，Chrome的WebSockets。
Basically - .responseText.length for Firefox and iPhone, .responseBody.length for IE, WebSockets for Chrome.
第二个主题建议bayeux / dojo将所有这些封装到更高级别的API中，因此您无需自己编写。
The second thread suggests bayeux/dojo encapsulate all this for you into a higher-level API so you don't have to write it yourself.
这篇关于通过Javascript / jQuery接收的字节数和字节总数的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
