Vue.lazyload 是一個Vue.js的懶加載插件。配合Vue.js開發時,使用Vue.lazyload可以大幅降低頁面的 loading 時間,提升用戶體驗 satisfaction,并且對于一些加載多媒體內容比如圖片、視頻等可以節約帶寬。
使用方法:
npm install vue-lazyload
在Vue中引入插件并配置:
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload,{
loading:require('path/to/loading-img');
});
其中loading屬性就是在懶加載圖片時顯示的圖片,可填寫相對或絕對路徑。
然后在模板中使用v-lazy指令使用懶加載:
<img v-lazy="path/to/img">
當圖片進入可視區域時,就會更新 img 元素的 src 屬性加載圖片。