Я работаю над предварительным загрузчиком изображений на основе 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'));
}
});
Теперь я считаю этот метод весьма полезным, поскольку могу предоставить сообщение о состоянии Инициализация во время выполнения необходимых запросов.Однако моя проблема теперь двоякая:
- Есть ли какой-нибудь способ захватить байты, загруженные из данного объекта изображения, возможно, используя
setInterval() для периодической проверки?В противном случае я возвращаюсь к вопросу о том, как индикатор прогресса висит на больших файлах. - Как заставить фактический калькулятор прогресса и т. Д. Часть сценария ждать, пока необходимые запросы Ajax не будут выполненызавершено (отображается Инициализация или что-то еще), чтобы можно было продолжить загрузку?
Кроме того, вот скрипт, который я сейчас использую, который снова рассчитывает прогресс на основе числаизображений, независимо от размера файла или полученных байтов.
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');
Надеюсь, я смогу превратить это в плагин, как только исправлю ошибки.