1. 程式人生 > >做圖片懶載入的步驟

做圖片懶載入的步驟

1、百度搜索v-lazy-npm 開啟首頁,然後在windows的cmd裡輸入npm install vue-lazyload --save (下載圖片懶載入的外掛)
2、複製下面程式碼到 main.js中 (注①:將有註釋刪掉的那句刪掉)(注②:粗體的那一句話、loading代表載入中的意思,所以將後面的路徑換成你想要載入時顯示的gif圖片線上地址即可)

點選進入GIF動態載入圖片地址

   import VueLazyload from 'vue-lazyload'
 
   Vue.use(VueLazyload)   //刪掉即可
 
   // with options
    Vue.use(VueLazyload, {
       preLoad: 1.3,
       error: 'dist/error.png',
       loading: 'dist/loading.gif',    // 換成你想要顯示的圖片地址
       attempt: 1
   })

3、將<img src=""/ > 中的src換成v-lazy 就完成啦在這裡插入圖片描述