Track image loading time?

Question

JavaScript

Hello. vuejs app.
Functionality on the site: when you click on the button, a link to the selected image is inserted into the img tag.

<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"]
}
...

Approximately such code.
Total: when you click, there is a request for an image (not ajax) and the server returns it. How to track this request and make loading... ?

Answer 1

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 throws a load event after loading is complete. In selectImage we turn on "twist-twirl" (loading), in the load handler we turn off "twist-twirl"