我正在研究一个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()
定期检查?否则,我会回到挂在大文件上的进度指示器的问题。此外,这是我目前使用的脚本,它再次根据图像数量计算进度,无论文件大小或接收到的字节数。
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');
希望我能够把它变成一个插件,一旦我解决了它的错误。
答案 0 :(得分: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中,这样您就不必自己编写它。