vue使用vue-lazyload图片懒加载并且设置loading大小
npm install vue-lazyload --saveimport { VueLazyload } from 'vue-lazyload'vue.use(VueLazyload, {preLoad: 1.3,attempt: 2,error: require('../img/icons/error.png'),loading: require('../img/icons/loading.p
·
// 安装npm包
npm install vue-lazyload --save
// 引入
import { VueLazyload } from 'vue-lazyload'
// 配置
vue.use(VueLazyload, {
preLoad: 1.3,
attempt: 2,
error: require('../img/icons/error.png'),
loading: require('../img/icons/loading.png') // 注意路径使用require(我这里使用相对路径)
})
// img使用v-lazy就可以实现懒加载
<div class="img-box">
<img v-lazy="imgSrc" />
</div>
// 背景图片使用v-lazy:background-image就可以实现懒加载
<div v-lazy:background-image="imgSrc"></div>
// css设置loading大小
.img-box {
background: #f4f4f4;
height: 100px;
// loading大小
img[lazy="loading"] {
width: 30px;
height: 30px;
}
// 实际图片大小
img[lazy="loaded"] {
width: 100%;
height: 100px;
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)