Lazy load images in Vue

Lazy load images to improve perceived performance.

If you have a view that has lot of images, you may observe high initial page load time and stuttering. Vue has to get the comparably larger payload to paint the UI, and this takes time.

The easiest way of lazy loading images is by using an package called vue-lazyload.

First, install the package -

npm install vue-lazyload

Next, load this with Vue.

// main.js
import Vue from "vue";
import VueLazyload from "vue-lazyload";

// other code
Vue.use(VueLazyload);

Finally, use lazy loading in your components.

<img v-lazy="car.jpg" />
comments powered by Disqus