VUE圖片懶加載

VUE圖片懶加載-vue lazyload插件的簡單使用

一. vue lazyload插件：

插件地址：https://github.com/hilongjw/vue-lazyload

 

二。使用實例

1.安裝

 

npm install vue-lazyload --save-dev

 

2.main.js 引入插件

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
error:require('./statics/site/imgs/erro.jpg'),
loading:require('./statics/site/imgs/load.gif')
})
// 這里還需要加上一個 require 

3.Vue文件中將需要懶加載的圖片綁定 v-bind:src 修改為 v-lazy

<img class="item-pic" v-lazy="newItem.picUrl"/>

 

三。功能擴展

圖片懶加載的簡單效果已經實現了，然后就可以按這開發文檔的api進行擴展了：