vue-lazyload實現圖片懶加載

這個插件使用非常簡單

安裝

npm install vue-lazyload --save

在main.js文件中引入，註冊

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
    loading: imgurl //加載時要顯示的圖片鏈接
})

在組件的img中使用

<img v-lazy="imgUrl"/>

原本是用src=“imgUrl”，只要將src改成v-lazy就行了，非常簡單。github地址https://github.com/hilongjw/vue-lazyload，有時間的話要去分析一下源碼，看是怎麼實現的。