vue 圖檔lazyload

今天看到我一醉哥的一篇朋友圈分享：《不如我們從頭來過 | 掘金》

看完之後，百感交集，網際網路的浪潮使創業公司如雨後春筍般崛起，

每一個初創公司都會有一群懷着美好願景的小夥伴，

但是當寒冬來臨時，也不得不去面對這殘酷的現實，願每一個被離職的各位大佬發展的越來越好。

然後我随便點開了掘金站長：陰明大佬的首頁，看到了提升掘金首頁打開速度，

進去看到了一個圖檔懶加載的方法（哎，之前的vue項目都沒有用到懶加載，慚愧慚愧），很簡單，實作如下：

npm i vue-lazyload -S      

然後main.js

import Vue from 'vue' import App from './App.vue' import VueLazyload from 'vue-lazyload'   Vue.use(VueLazyload)   // or with options Vue.use(VueLazyload, {   preLoad: 1.3,   error: '這裡填圖檔錯誤時的替代圖檔',   loading: '這裡填圖檔加載時的替代圖檔',   attempt: 1 })   new Vue({   el: 'body',   components: {     App   } })

然後在img标簽中的src 換成 v-lazy 即可使用

<img v-lazy="你的圖檔路徑" >      

更多詳細文檔請看 https://www.npmjs.com/package/vue-lazyload

posted @ 2018-11-16 18:50 青雲碼上 閱讀( ...) 評論( ...) 編輯 收藏