@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... ?
  • Вопрос задан
  • 677 просмотров
Решения вопроса 1
BRAGA96
@BRAGA96
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
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@SeaBreeze876
Front-end разработчик
img бросает событие load после завершения загрузки. В selectImage включаем "кручу-верчу" (loading), в обработчике load "кручу-верчу" выключаем
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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