Call function when image is loaded in VueJS using @load.

In VueJS, there is a way to find out when an image is fully loaded on a web page (when the image request is finished). We achieve this using the @load event that is available in VueJS and works in the following way: 
```
<template>
  <div>
    <img 
      class="img__class"
      src="/photo.jpg"
      @load="onImageLoad"
     />
  </div>
</template>

export default {
  data: {
    isImageLoaded: false,
  },

  methods: {
    onImageLoad() {
      this.isImageLoaded = true
      // optional
      // console.log('Image is loaded')
    }
  }
}
```

This feature will come in handy if we want to render skeleton components while images are loading or if we want to implement lazy loading functionality.

Mihai Barbu
08 Dec 2021
« Back to post