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

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

I ' m ищет способ включить размер файла в расчет прогресса. Теперь я изучил некоторые (кроссбраузерные) уловки для захвата размера файла данного изображения, и мне кажется, что запросы Ajax для Content-Length были самыми надежными (с точки зрения точности), например итак:

var imageSizeTotal = 0;
var ajaxReqest = $.ajax({
    type: 'HEAD',
    url: 'path/to/image',
    success: function(message){
        imageSizeTotal += parseInt(ajaxRequest.getResponseHeader('Content-Length'));
    }
});

Теперь я считаю этот метод весьма полезным, так как я могу предоставить сообщение о состоянии Initializing , пока выполняются необходимые запросы. Однако сейчас у меня двоякая проблема:

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

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