Vue項(xiàng)目中實(shí)現(xiàn)圖片懶加載
對(duì)于圖片過多的頁面，為了加速頁面加載速度锐帜，所以很多時(shí)候我們需要將頁面內(nèi)未出現(xiàn)在可視區(qū)域內(nèi)的圖片先不做加載被济， 等到滾動(dòng)到可視區(qū)域后再去加載。這樣子對(duì)于頁面加載性能上會(huì)有很大的提升贴妻，也提高了用戶體驗(yàn)切油。
實(shí)現(xiàn)方法(使用vue的vue-lazyload插件)
1.安裝插件
npm install vue-lazyload --save-dev
2.在入口文件main.js中引入并使用
import VueLazyload from 'vue-lazyload'
直接使用
Vue.use(VueLazyload)
或者添加自定義選項(xiàng)
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
3.修改圖片顯示方式為懶加載（將 :src 屬性直接改為v-lazy）
<a href="javascript:;"><img v-lazy="'/static/img/' + item.productImage" :key=' item.productImage'></a>
// :key=' item.productImage' 防止 vue-lazyload重復(fù)請(qǐng)求圖片的問題
