Vue 項(xiàng)目使用 Vue-lazyload 做圖片懶加載品嚣。
下載
下載 Vue-lazyload 的包
NPM包
npm install vue-lazyload --save
引入
在項(xiàng)目 main.js中通過 import 引入
import Vue from 'vue'
import App from '@/App'
import VueLazyload from 'vue-lazyload'
配置屬性
Vue.use( VueLazyload, {
preLoad: 1.3,
error: require('@/assets/loding@3x.png'),
loading: require('@/assets/loding@3x.png'),
attempt: 1
})
官方 Api
| 屬性 | 描述 | 默認(rèn) | 選項(xiàng) |
|---|---|---|---|
preLoad |
預(yù)加載高度的比例 | 1.3 |
Number |
error |
圖片加載失敗后 | 'data-src' |
String |
loading |
圖像正在加載時(shí) | 'data-src' |
String |
attempt |
嘗試次數(shù) | 3 |
Number |
listenEvents |
需要監(jiān)聽的事件 | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] |
所需監(jiān)聽的事件 |
adapter |
動(dòng)態(tài)修改元素的屬性 | { } |
元素適配器 |
filter |
圖像的 src 過濾器 | { } |
圖像 url 過濾器 |
lazyComponent |
lazyload 組件 | false |
懶加載組件 |
示例
使用 v-lazy 指令
<div class="main">
<div class="list" v-if="list.length > 0" v-for="(item, index) of list" :key="index" @click="goInfo(index, item.url_address)">
<div class="img">
<img v-lazy="item.img_url" alt="">
</div>
<p class="txt" v-text="item.title"></p>
</div>
<div class="noMore">已經(jīng)到底啦~</div>
<p class="list" v-if="list.length<=0">活動(dòng)籌備中...</p>
</div>
