vue-lazyload图片懒加载的使用(vue常用插件)

vue-lazyload图片懒加载

当打开一个网页有很多图片,同时加载这么多图片网页肯定会比较卡顿,要是只加载可视区的图片,其他图片用占位图代替,当滚动到它们时再加载原来的图片,这样的话网页流畅度提高了不少.

1.安装

本例是利用npm安装vue-lazyload,所以使用的电脑需要安装node。

npm install vue-lazyload [email protected]
           

2.main.js导入,并注册

• 不传参数,简单使用

import VueLazyLoad from "vue-lazyload";
//使用懒加载插件
Vue.use(VueLazyLoad)
           

• 安装时可以传一些参数

Vue.use(VueLazyLoad, {
//图片还没加载出来,显示的占位图片
  loading:   require("assets/img/common/placeholder.png") 	
//图片加载失败显示的图片
  error:
require("assets/img/common/error.png") 
})
           

3.组件中使用

src属性改为v-lazy

<img v-lazy="showImage" alt="">