vue圖片懶加載（Vue-Lazyload）使用

1. 首先在npm上下載vue-lazyload的包

$ npm install vue-lazyload --save

2. 在main.js裏面import這個包

import VueLazyload from 'vue-lazyload'

// 設置參數
Vue.use(VueLazyload, {  
  preLoad: 1.3,   //預加載的寬高比
  error: 'dist/error.png',  //圖片加載失敗時使用的圖片源
  loading: 'dist/loading.gif',  //圖片加載的路徑
  attempt: 1  //嘗試加載次數
})

具體配置參數見 https://www.npmjs.com/package/vue-lazyload

注：圖片位置不同，引入方法不同，具體如下：

• 佔位圖（error，loading對應的圖片）如果在static文件夾內可以直接引入路徑；

• 如果再assets文件夾內的話需要以require(‘img.src’)的方式引入圖片，否則會導致webpack在打包時候無法正確解析圖片；

例如：

Vue.use(VueLazyLoad, {
  loading: require('./assets/img/loading.gif'),
  error: require('./assets/img/error.jpg')
})

3. 在組件中使用，如下：

<ul>
  <li v-for="img in imgs">
    <img v-lazy="img" >
  </li>
</ul>

更多用法見 https://www.npmjs.com/package/vue-lazyload