1.安装
npm install vue-lazyload —save
2.加载
首先引入Vue和VueLazyload。
import Vue from 'vue'; import VueLazyload from 'vue-lazyload';
接下来使用Vue.use()注册插件。
// 注册插件 Vue.use(VueLazyload,{ // 懒加载默认图片 loading:'https://www.keaidian.com/uploads/allimg/190424/24110307_8.jpg' })
preLoad:表示lazyload的元素,距离页面底部距离的百分比.计算值为(preload - 1),默认值为1.3 error: 表式加载失败展示的图片,需要传入一个字符串作为解析 loading:表式加载成功展示的图片,需要传入一个字符串作为解析 attempt:图片加载失败后的重试次数,需要传入一个Number
3.使用
如果需要懒加载,只需要使
v-lazy
代替img
即可。
<img v-lazy="item.imd" />
版权声明:《 [插件]vue-lazyload 》为甄雨锋原创文章,转载请注明出处!
最后编辑:2022-5-28 22:05:57