Lazy loading : First of all, the src Link to the same graph , And store its real image address in img In the custom attribute of the tag . When js When the picture element enters the visual window , Store the address in the custom property to src Attribute , Achieve the effect of lazy loading .

seeing the name of a thing one thinks of its function , The simple understanding is
When the page opens , First of all, all the pictures imported from the data will not be displayed , All graphs first load a picture specified by themselves , General dynamic picture effect is better , Then the real path images are displayed to the page one by one , So as to achieve the effect of lazy loading .

advantage : Lazy loading can prevent the page from responding to a large number of requests to the server at one time, resulting in slow response of the server , Prevent page jam or crash .

first , We need to download and install the plug-in for lazy loading ( modularization )
npm install vue-lazyload -s
Installation completed , As shown in the figure below


next , We need modular introduction vue-lazyload.js
import lazyload from "vue-lazyload"
below , We are here VUE Introduce a picture in , Inside the single quotation marks is the image displayed when the load is lazy , Specific path we find our own path
Vue.use( lazyload,{     loading:'../static/images/ttp.gif'} )
Next, we find the image location code that needs lazy loading , as :
<img :src="listB[0].Pic"/>
We will :src Change to v-lazy that will do , Change it as follows :
<img v-lazy="listB[0].Pic"/>
In this way, our lazy loading is realized , If necessary, supplement , Please leave a message below

Detailed introduction <>