Отследить время загрузки картинки?

Question

[andrei_pro]

Всем привет. Приложение на vuejs.
На сайте функционал: при нажатии на кнопку в тег img подставляется ссылка на выбранное изображение.

<a href="#" data-img="http://site1.ru/img1.jpg" @click="selectImage">Картинка 1</a>
<a href="#" data-img="http://site1.ru/img2.jpg" @click="selectImage">Картинка 2</a>

<img v-if="selectedImage" :src="selectedImage">

...
selectImage(e) {
    this.selectedImage = e.attr["data-img"]
}
...

Примерно такой код.
Итого: при нажатии идет запрос на картинку (не ajax) и сервер отдает. Как отследить этот запрос и сделать loading... ?

Comments

[sim3x]

На бекграунд повесьте лоадер
Когжа картинка загрузится она закроет лоадер

Answer 1

[Ihor Bratukh]

console.time('Image loading');
document.querySelector('img').addEventListener('load', function() {
	console.timeEnd('Image loading'); //> Image loading: 1192.903076171875ms
});

var start = performance.now();
document.querySelector('img').addEventListener('load', function() {
	var end = performance.now();
	console.log(end - start); //> 13.999999999214197
});

Answer 2

[Анатолий Жаров]

img бросает событие load после завершения загрузки. В selectImage включаем "кручу-верчу" (loading), в обработчике load "кручу-верчу" выключаем