如果項(xiàng)目中引入的
vant的話可以直接使用它提供的Lazyload懶加載方式雹舀。
GitHub：https://github.com/Ewall1106/mall
安裝及引入
$ cnpm install vue-lazyload --save
install
-
main.js中引入引入并注冊(cè)vue-lazyload。
main.js
配置參數(shù)
參數(shù)有很多粗俱，具體大家可以去官網(wǎng)上查看并自主設(shè)置说榆，我這里就只實(shí)現(xiàn)基本的功能配置一個(gè)
loading參數(shù)，實(shí)現(xiàn)在圖片在加載的時(shí)候有一個(gè)loading的效果寸认。丟個(gè)我制作gif的網(wǎng)站：http://www.ajaxload.info
參數(shù)配置
頁(yè)面中的使用
-
html屬性替換
<img :src="item.imgurl" />
替換成：
<img v-lazy="item.imgurl"/>
- 對(duì)
loading時(shí)候的gif圖做下簡(jiǎn)單樣式處理：
css
- 當(dāng)你網(wǎng)速比較慢的時(shí)候的：
