Полученные байты и общее количество байтов изображений через Javascript / jQuery

Я работаю над предварительным загрузчиком изображений на основе Javascript / jQuery и наткнулся на небольшую загвоздку. Хотя на данный момент он обеспечивает прогресс на основе loaded_images / total_images, это не очень точно, учитывая, что на странице может быть тысяча изображений размером 1 КБ и одно изображение размером 1 МБ.

Я ищу способ включить размер файла в расчет прогресса. Теперь я изучил некоторые (кроссбраузерные) уловки для захвата размера файла данного изображения, и мне кажется, что запросы 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 (отобразить Initializing или что-то еще), чтобы он мог продолжить загрузку?

Кроме того, вот сценарий, который я использую в настоящее время, который, опять же, вычисляет прогресс на основе количества изображений, независимо от размера файла или полученных байтов.

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');

Надеюсь, я смогу превратить это в плагин, как только исправлю в нем ошибки.