Learn about Lazy loading images in Vue.js

In the age of increasing technology development today, the use of images by websites is almost 100%. There are even websites that contain mostly images, and their sizes are not small either. Trying to compare a website when entering will load all the photos once in a page when you visit. Oh, if more and more photos, then the performance of the website will be quite low. Moreover, uploading photos takes up a lot of resources and bandwidth to handle. As such, users will no longer be interested in returning. Instead of processing the above, we can optionally download images using lazy loading images. We will find out more in the section below. Go go!

1. What is lazy loading?

Lazy loading concept is definitely for developers, especially the front-end developers have certainly heard. Understanding lazy means when you need it, you can use it. It will not immediately serve us if we do not have something to understand that we need it. =)))

For example, with Vue.js, we have an attribute with v-model that is v-model.lazy. The meaning of this attribute is when you change the text and switch to another component in the interface, then the change text event of the input cell occurs and the data is updated to the model. Is it a little different from not using lazy =))

Take another example. You can hear the so-called Lazy Loading Routes or Async Components in Vue.js already. The nature of them is that instead of loading the entire content, the browser will only load the file when the client side calls for it. I have read and reference, I have seen quite a few articles now and clearly about this part. I would like to share:

• Docs Lazy Loading Routes Vue.js
• Lazy Loading Routes on Viblo

2. Lazy Loading Images – Vue.js

To this part, I think you also understand somewhat about Lazy loading already. Now I will go to the main part that I am talking about today, that is, I will introduce lazy loading images in Vue.js.

Setting

I will use Nuxt.js , a framework for creating Universal Vue.js applications. I also have links to some documents about Nuxt.js at:

• Introduction to Nuxt.js – Viblo
• Docs Nuxt.js

All the settings I have showed are very detailed.

Package Vue-lazyload for lazy-loading images

There are many packages that support lazy loading images like vue-lazyload , lozad , lazyload . However, I choose the vue-lazyload package to handle.

Setting

The options here you can refer to Github vue-lazyload . Quite easy to understand =))))
In addition, you can learn more about other options to be able to customize the way you want.
Now that I have installed, test time is only available. I’ll take 10 photos and put them in the static directory. My photos displayed are approximately 900kb / 1 image in size.

Note that if you want to lazy loading images through the background-image attribute, vue-lazyload will also support you.

Here are the results of my testing of loading browser lazy loading images and not using the results. We will disable the cache from the browser. Notice how much of the network you will see when scrolling, the image will load there – instead of loading it all at once. And this is the result.
Lazy use loading:

Not using lazy loading:

Obviously, lazy loading use has a great effect in saving resources, (transferring, requests, timing, …), pulling TTFB lower. Moreover, it also provides great support in improving UX for users. Here my image is very small, only a few hundred kb, furthermore the number of photos is only 10. So wonder if wondering if your website has a lot of images, everything will be like.
In addition, this package also supports loading loading lazy components as I said in the first part. You can use 2 in 1. If you have free time, study it. I think it’s a great package.

Conclusion

My article may be quite light on the writing, so if you read it, everyone will try to read it all. Thank you for following my post. See you in the next article. I would like to thank.
Link github: https://github.com/vunguyen10111995/image-lazy-loading