Lazy load images in Vue

📅 Jul 19, 2019 · 📝 Apr 30, 2020 · ☕ 1 min read

#learn
#VueJS

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 -

1

npm install vue-lazyload

Next, load this with Vue.

1
2
3
4
5
6


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

// other code
Vue.use(VueLazyload);

Finally, use lazy loading in your components.

1

<img v-lazy="car.jpg" />

Stay in touch!

Share on

WRITTEN BY

Prashanth Krishnamurthy

Technologist | Creator of Things

Lazy load images in Vue

See Also