介绍: vue-lazyload主要应用于图片延迟加载。包含如下的特点:
- 小巧轻便,功能强大,易于使用
- 可以用于加载任何图像类型
- 支持Vue 1.0和Vue 2.0
理解图片延迟加载:
当某个网页中呈现的图片较多时,由于网络等原因,访问该网页时,所有的图片不会立马全部进行显示出来,会出现一定的网络延迟加载的现象,影响用户体验;但我们可以vue-lazyload插件来实现在图片加载的过程中,先显示出默认的加载图片,直到图片完全显示,默认图片消失,这样就会大大的提升用户体验。
使用方法如下:
1、通过npm安装
npm install vue-lazyload -s
复制代码
2、在main.js中进行引用
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3, // 预压高度的比例
error: '../assets/img/no-pic.png', // 图像的加载失败时 显示的error图标
loading: '../assets/imgLoading.png', // 图像正常加载时 显示的loading图标
attempt: 1 // 图像尝试加载 次数
})
复制代码
3、在组件中使用
<img v-lazy="item.picUrl" alt="">
图片地址就是item.picUrl,一般写接口中拿到的图片地址变量