Estoy trabajando en un preloader de imagen potenciado por Javascript/jQuery, y he encontrado un pequeño inconveniente. Mientras que actualmente proporciona el progreso basado en loaded_images/total_images, esto no es muy exacto dado que una página podría tener mil imágenes de 1kB y una imagen de 1MB.Bytes recibidos y bytes total de imágenes a través de Javascript/jQuery
Estoy buscando una forma de incorporar filesize en los cálculos de progreso. Ahora, He mirado en algunos trucos (cruz navegador compatible) para capturar el tamaño del archivo de una imagen dada, y parece que las solicitudes de Ajax Content-Length eran los más fiables (en términos de precisión), así:
var imageSizeTotal = 0;
var ajaxReqest = $.ajax({
type: 'HEAD',
url: 'path/to/image',
success: function(message){
imageSizeTotal += parseInt(ajaxRequest.getResponseHeader('Content-Length'));
}
});
Ahora, creo que este método es bastante útil, ya que puedo proporcionar un mensaje de estado de Inicializando mientras se realizan las solicitudes necesarias. no
- hay ninguna manera posible capturar los bytes cargados de un objeto de imagen dada, tal vez usando
setInterval()para comprobar periódicamente: sin embargo mi problema ahora es doble? De lo contrario, estoy más o menos en el tema del indicador de progreso colgando en archivos de gran tamaño. - ¿Cómo puedo forzar a la parte de la secuencia de comandos de la calculadora de progreso real a esperar hasta que se completen las solicitudes Ajax necesarias (mostrando inicializando o lo que sea), para que pueda continuar con la carga?
Además, aquí está el script que actualmente uso, que una vez más, calcula el progreso en función del número de imágenes, independientemente del tamaño del archivo o los bytes recibidos.
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');
Con suerte, podré convertir esto en un complemento, una vez que trabaje con los errores.
No conozco ningún método para obtener el tamaño de imagen parcialmente cargado – mplungjan
No me puedo imaginar hacer esto sin ayuda del lado del servidor, específicamente para proporcionar un nombre de imagen de asignación de tabla (URL) al tamaño de la imagen. Ahora, incluso con eso, no podrá saber qué cantidad de cada imagen se carga, pero sus manejadores de "carga" en los objetos de la imagen pueden saber al menos cuándo terminan y marcar el tamaño. – Pointy
** @ mplugjan **; Gracias, veo tu historial con Javascript, y es desafortunado que no sepas de qué manera. Ya acepté que probablemente sea imposible, pero la segunda parte de mi pregunta todavía es algo con lo que me gustaría obtener ayuda. – Dan