How to use lazy loading in vue.js

vue.js uses the lazy loading method: first install lazyload; then reference it globally in [main.js] and configure the image; finally, bind the image that needs lazy loading to the vue file [v-bind] :src] was changed to [v-lazy].

The operating environment of this tutorial: windows10 system, vue2.9, this article is applicable to all brands of computers.

[Related article recommendations: vue.js]

vue.js uses lazy loading method:

1. Install lazyload

npm install lazyload -s

2. Reference it globally in main.js and configure the image

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload) //默认配置
// 或者是自己配置预加载图片
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

3. Bind the image that needs lazy loading to v-bind:src in the vue file Change it to v-lazy

<img v-lazy="&#39;@/assets/images/27.png&#39;" class="images-line">

4. Does lazyload fail to reference images with relative paths? Operation require reference picture

<img v-lazy="require(&#39;@/assets/images/eight.png&#39;)" class="eight-top">

Related free learning recommendations: JavaScript (video)

The above is the detailed content of How to use lazy loading in vue.js. For more information, please follow other related articles on the PHP Chinese website!