Отслеживание прогресса кэширования изображений?

Question

[Руслан]

Здравствуйте!

Есть следующий код на javascript:

function preloadImages(array) {
        if (!preloadImages.list) {
            preloadImages.list = [];
        }
        for (var i = 0; i < array.length; i++) {
            var img = new Image();
            img.src = path+array[i];
            preloadImages.list.push(img);
        }
    }

Приведенный код создает массив изображений на основе массива путей к изображениям. Таким образом происходит кэширование изображений в объектной модели страницы. Далее можно у элемента-изображения на странице быстро перебирать атрибут src, подставляя путь из первичного массива, создавая тем самым эффект анимации.


Вопрос: как отследить в определенный момент времени, сколько изображений уже загрузилось браузером. в общем, нужно отобразить прогресс-бар загрузки изображений в кэш.


Спасибо за советы.

Answer 1

[vitvad]

Не очень авторитетный источник, но вот image.complete
Есть у объекта Image флаг complete если картинка загружена уже и будет браться из кеша — флаг стоит в true.

var img =  new Image();
img.onload = function(){
  count++;   
}
if(image.complete){
  count++;
}

if(count == imageArray.length) doSomething();

Comments

[vitvad]

это в дополнение к ответу выше.Осноной момент тут — навесить обработчики, до того как указываете «src» атрибут

Answer 2

[Malyw]

Во время загрузки картинки возможны три варианта послежующих событий с ней:
1) Картинка загрузится (сработает событие load)
2) Картинка не загрузится (сработает событие error)- например, по указаному пути от сервера будет ответ 404
3) Загрузка картинки будет прервана (сработает событие abort)
Можно использовать следующий код:

var img = new Image();
img.onload = function(){
 console.log('img is loaded!');
}
img.onerror = function(){
 console.log('there is some error, when trying to load img');
}
img.onabort = function(){
 console.log('img loading is aborted');
}
img.src = 'https://www.google.com/images/srpr/logo4w.png';

Слушатели событий также можно навешать через addEventListener.

Answer 3

[Malyw]

То есть, при срабатывании любого из вышеперечисленных событий, вы инкрементируете некоторую переменную (напр., «processed»), а процент «обработанных» браузером изображений обновляете примерно как:

updateLoderView( processed/ preloadImages.list.length);

Либо выполняете какие-то другие действия при срабатывании событий «load», «error»- это уже на ваше усмотрение.

Answer 4

[Руслан]

Спасибо!