Razbezhkin
@Razbezhkin
программист, преподаватель

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

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

Есть следующий код на 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, подставляя путь из первичного массива, создавая тем самым эффект анимации.


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


Спасибо за советы.
  • Вопрос задан
  • 3559 просмотров
Решения вопроса 1
vitvad
@vitvad
Не очень авторитетный источник, но вот image.complete
Есть у объекта Image флаг complete если картинка загружена уже и будет браться из кеша — флаг стоит в true.

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

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

Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Malyw
@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.
Ответ написан
Комментировать
Malyw
@Malyw
То есть, при срабатывании любого из вышеперечисленных событий, вы инкрементируете некоторую переменную (напр., «processed»), а процент «обработанных» браузером изображений обновляете примерно как:
updateLoderView( processed/ preloadImages.list.length);

Либо выполняете какие-то другие действия при срабатывании событий «load», «error»- это уже на ваше усмотрение.
Ответ написан
Комментировать
Razbezhkin
@Razbezhkin Автор вопроса
программист, преподаватель
Спасибо!
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы