1. 安裝插件
npm install vue-lazyload --save-dev
2.main.js引入插件
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
error:require('@/static/error.png'),
loading:error:require('@/static/loading.png')
})
3. vue文件中
- vue文件中將需要懶加載的圖片綁定 v-bind:src 修改為 v-lazy
<img class="item-pic" v-lazy="newItem.picUrl"/>
4.設(shè)置樣式
tips:加載時(shí)可以不設(shè)置圖片,使用背景顏色代替
//加載中的樣式
img[lazy=loading] {
}
//加載錯(cuò)誤時(shí)的樣式
img[lazy=error] {
}
//加載后的樣式
img[lazy=loaded] {
}
例子
img[lazy=loading]{
transform:scaleX(0.3) scaleY(0.5);
}
img[lazy=loaded]{
animation:appear 0.3s;
animation-fill-mode: both;
}
@keyframes appear {
from{
opacity:0;
}
to{
opacity:1;
}
}
