[插件]vue-lazyload

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" />
发表评论 / Comment

用心评论~