字节接收且通过Javascript / jQuery的总字节数的图像 [英] Bytes recieved and bytes total of images via Javascript/jQuery
问题描述
我工作的一个Javascript / jQuery的供电图像preloader，并纷纷创出有点障碍的。而作为目前它提供了一种基于 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请求对内容长度是最可靠（在准确性方面）像这样：
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');
希望我能够把它变成一个插件，一旦我工作的虫子吧。
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:
<一个href="http://stackoverflow.com/questions/3880381/xmlhtt$p$pquest-responsetext-while-loading-readystate-3-in-chrome">XmlHtt$p$pquest.responseText而在Chrome浏览器加载（readyState的== 3）
XmlHttpRequest.responseText while loading (readyState==3) in Chrome
这里：
<一个href="http://stackoverflow.com/questions/1573160/comet-jetty-tomcat-having-some-browser-issues-with-firefox-and-chrome">Comet码头/ Tomcat的，具有Firefox和Chrome浏览器一些浏览器的问题
基本上 - .responseText.length Firefox和iPhone，.responseBody.length的IE浏览器，的WebSockets为Chrome
Basically - .responseText.length for Firefox and iPhone, .responseBody.length for IE, WebSockets for Chrome.
第二个线程表明贝叶/道场封装这一切都为你进入一个更高级别的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屋！
