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:
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
1 |
npx create-nuxt-app image-lazy-loading Generating Nuxt.js project <span class="token keyword">in</span> /home/vu/Desktop/image-lazy-loading ? Project name image-lazy-loading ? Project description My lovely Nuxt.js project ? Use a custom server framework none ? Choose features to <span class="token function">install</span> <span class="token punctuation">(</span> Press <span class="token operator"><</span> space <span class="token operator">></span> to select, <span class="token operator"><</span> a <span class="token operator">></span> to toggle all, <span class="token operator"><</span> i <span class="token operator">></span> to invert selection <span class="token punctuation">)</span> ? Use a custom UI framework none ? Use a custom <span class="token function">test</span> framework none ? Choose rendering mode Single Page App ? Author name Vu Nguyen ? Choose a package manager yarn To get started: <span class="token function">cd</span> image-lazy-loading yarn run dev To build <span class="token operator">&</span> start <span class="token keyword">for</span> production: <span class="token function">cd</span> image-lazy-loading yarn run build yarn start |
I will use Nuxt.js , a framework for creating Universal Vue.js applications. I also have links to some documents about Nuxt.js at:
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
1 |
yarn add vue-lazyload |
1 |
<span class="token operator">*</span> plugins <span class="token operator">/</span> vue <span class="token operator">-</span> lazyload <span class="token operator">*</span> <span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span> <span class="token punctuation">;</span> <span class="token keyword">import</span> Lazyload <span class="token keyword">from</span> <span class="token string">'vue-lazyload'</span> <span class="token punctuation">;</span> Vue <span class="token punctuation">.</span> <span class="token function">use</span> <span class="token punctuation">(</span> Lazyload <span class="token punctuation">,</span> <span class="token punctuation">{</span> preLoad <span class="token punctuation">:</span> <span class="token number">1.3</span> <span class="token punctuation">,</span> error <span class="token punctuation">:</span> <span class="token string">'/404.png'</span> <span class="token punctuation">,</span> loading <span class="token punctuation">:</span> <span class="token string">'/loading.png'</span> <span class="token punctuation">,</span> attempt <span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">,</span> listenEvents <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'scroll'</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> |
1 |
<span class="token operator">*</span> nuxt <span class="token punctuation">.</span> config <span class="token punctuation">.</span> js <span class="token operator">*</span> plugins <span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token string">'~/plugins/vue-lazyload'</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> |
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.
1 |
<span class="token operator">*</span> pages <span class="token operator">/</span> index <span class="token punctuation">.</span> vue <span class="token operator">*</span> <span class="token operator"><</span> template <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading__item"</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry <span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span> s <span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book <span class="token punctuation">.</span> It has survived not only five centuries <span class="token punctuation">,</span> but also the leap into electronic typesetting <span class="token punctuation">,</span> remaining essentially unchanged <span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span> s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages <span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> img v <span class="token operator">-</span> lazy <span class="token operator">=</span> <span class="token string">"`/1-1.jpg`"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading__item"</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry <span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span> s <span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book <span class="token punctuation">.</span> It has survived not only five centuries <span class="token punctuation">,</span> but also the leap into electronic typesetting <span class="token punctuation">,</span> remaining essentially unchanged <span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span> s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages <span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> img v <span class="token operator">-</span> lazy <span class="token operator">=</span> <span class="token string">"`/1-2.png`"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading__item"</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry <span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span> s <span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book <span class="token punctuation">.</span> It has survived not only five centuries <span class="token punctuation">,</span> but also the leap into electronic typesetting <span class="token punctuation">,</span> remaining essentially unchanged <span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span> s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages <span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> img v <span class="token operator">-</span> lazy <span class="token operator">=</span> <span class="token string">"`/1-2-2.png`"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading__item"</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry <span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span> s <span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book <span class="token punctuation">.</span> It has survived not only five centuries <span class="token punctuation">,</span> but also the leap into electronic typesetting <span class="token punctuation">,</span> remaining essentially unchanged <span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span> s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages <span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> img v <span class="token operator">-</span> lazy <span class="token operator">=</span> <span class="token string">"`/1-2-3.png`"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading__item"</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry <span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span> s <span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book <span class="token punctuation">.</span> It has survived not only five centuries <span class="token punctuation">,</span> but also the leap into electronic typesetting <span class="token punctuation">,</span> remaining essentially unchanged <span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span> s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages <span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> img v <span class="token operator">-</span> lazy <span class="token operator">=</span> <span class="token string">"`/1-2-4.png`"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading__item"</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry <span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span> s <span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book <span class="token punctuation">.</span> It has survived not only five centuries <span class="token punctuation">,</span> but also the leap into electronic typesetting <span class="token punctuation">,</span> remaining essentially unchanged <span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span> s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages <span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> img v <span class="token operator">-</span> lazy <span class="token operator">=</span> <span class="token string">"`/1-2-5.png`"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading__item"</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry <span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span> s <span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book <span class="token punctuation">.</span> It has survived not only five centuries <span class="token punctuation">,</span> but also the leap into electronic typesetting <span class="token punctuation">,</span> remaining essentially unchanged <span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span> s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages <span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> img v <span class="token operator">-</span> lazy <span class="token operator">=</span> <span class="token string">"`/1-2-6.png`"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading__item"</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry <span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span> s <span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book <span class="token punctuation">.</span> It has survived not only five centuries <span class="token punctuation">,</span> but also the leap into electronic typesetting <span class="token punctuation">,</span> remaining essentially unchanged <span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span> s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages <span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> img v <span class="token operator">-</span> lazy <span class="token operator">=</span> <span class="token string">"`/1-2-7.png`"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading__item"</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry <span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span> s <span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book <span class="token punctuation">.</span> It has survived not only five centuries <span class="token punctuation">,</span> but also the leap into electronic typesetting <span class="token punctuation">,</span> remaining essentially unchanged <span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span> s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages <span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> img v <span class="token operator">-</span> lazy <span class="token operator">=</span> <span class="token string">"`/1-2-8.png`"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token string">"lazy-loading__item"</span> <span class="token operator">></span> <span class="token operator"><</span> span <span class="token operator">></span> Lorem Ipsum is simply dummy text <span class="token keyword">of</span> the printing and typesetting industry <span class="token punctuation">.</span> Lorem Ipsum has been the industry's standard dummy text ever since the <span class="token number">1500</span> s <span class="token punctuation">,</span> when an unknown printer took a galley <span class="token keyword">of</span> type and scrambled it to make a type specimen book <span class="token punctuation">.</span> It has survived not only five centuries <span class="token punctuation">,</span> but also the leap into electronic typesetting <span class="token punctuation">,</span> remaining essentially unchanged <span class="token punctuation">.</span> It was popularised <span class="token keyword">in</span> the <span class="token number">1960</span> s <span class="token keyword">with</span> the release <span class="token keyword">of</span> Letraset sheets containing Lorem Ipsum passages <span class="token punctuation">,</span> and more recently <span class="token keyword">with</span> desktop publishing software like Aldus PageMaker including versions <span class="token keyword">of</span> Lorem Ipsum <span class="token punctuation">.</span> <span class="token operator"><</span> <span class="token operator">/</span> span <span class="token operator">></span> <span class="token operator"><</span> img v <span class="token operator">-</span> lazy <span class="token operator">=</span> <span class="token string">"`/1-3-1.jpg`"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> template <span class="token operator">></span> <span class="token operator"><</span> script <span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> components <span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> <span class="token operator"><</span> style lang <span class="token operator">=</span> <span class="token string">"scss"</span> <span class="token operator">></span> <span class="token punctuation">.</span> lazy <span class="token operator">-</span> loading <span class="token punctuation">{</span> <span class="token operator">&</span> __item <span class="token punctuation">{</span> width <span class="token punctuation">:</span> <span class="token number">750</span> px <span class="token punctuation">;</span> margin <span class="token punctuation">:</span> auto <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator"><</span> <span class="token operator">/</span> style <span class="token operator">></span> |
Note that if you want to lazy loading images through the background-image attribute, vue-lazyload will also support you.
1 |
<span class="token operator"><</span> div v <span class="token operator">-</span> lazy <span class="token punctuation">:</span> background <span class="token operator">-</span> image <span class="token operator">=</span> <span class="token string">"src"</span> <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> |
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