1兼蜈、安裝
vue-lazyload官網(wǎng):https://github.com/hilongjw/vue-lazyload
$ cnpm install vue-lazyload --save
2、main.js中引入
(1)引入并注冊vue-lazyload
(2)配置參數(shù)
① 參數(shù)有很多尺碰,具體大家可以去官網(wǎng)上查看并自主設(shè)置梯码,我這里就只實現(xiàn)基本的功能配置一個loading
參數(shù)辛孵,實現(xiàn)在圖片在加載的時候有一個loading的效果
② 丟個我制作gif的網(wǎng)站:http://www.ajaxload.info/
③ 注意路徑
3、頁面中的使用
(1)html屬性替換
<img :src="item.imgurl" alt="">
替換成:
<img v-lazy="item.imgurl" alt="">
(2)對loading時候的gif圖做下簡單樣式處理:
4墙牌、頁面呈現(xiàn)效果
(當你網(wǎng)速比較慢的時候的)
參考學(xué)習(xí)
https://github.com/hilongjw/vue-lazyload