vue圖片懶載入lazy-load

• 第一步安裝

npm i vue-lazyload -D

• 第二步引入

import VueLazyload from 'vue-lazyload'

• 第三步簡單配置引數（兩種圖片路徑方法）

//最外層static目錄下的圖片引用
Vue.use(VueLazyload,{
    error:'/static/images/logo.png',//圖片載入失敗時候顯示的圖片
    loading:'/static/images/loading.gif'//圖片還未載入完成時候的loading圖片
})
//src下的assets目錄下的圖片
Vue.use(VueLazyload,{
    error:require('./assets/images/logo.png'),
    loading:require('./assets/images/loading.gif')
})

因為src中的檔案會被webpack編譯，assets資料夾中的圖片地址，會在編譯過程中重新命名。vue-lazyload是在main.js檔案中引入，不會被webpack進行編譯，因此vue-lazyload無法獲得正確的圖片地址，所以直接寫相對地址就無法獲取到圖片正確地址

• 第四步寫loading圖片的樣式（具體怎麼寫樣式根據情況來，也可以不寫）

img[lazy="loading"]{
  display:block;
  width:50px !important;
  height:50px !important;
  margin:0 auto;
  }

• 第五步使用

:src--->v-lazy
把<img :src="item.image" alt="img">
改成<img  v-lazy="item.image" alt="img">

效果載入中

載入完成

友情提示（谷歌模擬網速慢的時候看loading效果F12---Network---Slow 3G）

更多引數

詳情請看lazy-load官網：https://www.npmjs.com/package/vue-lazyload

gzh.jpg

每日分享前端技術知識，致力於幫助更多前端人翻過一座座山，踏過一個個坑。