vue 實現圖片懶加載功能

一個頁面圖片比較多的時候，需要對界面的圖片進行懶加載處理，今天遇到了，做個懶加載的筆記。

npm install vue-lazyload --save-dev2，需要在main.js里面進行引用。

import VueLazyload from 'vue-lazyload';Vue.use(VueLazyload);或者自定義Vue.use(VueLazyload, {preLoad: 1.3,error: ’dist/error.png’,loading: ’dist/loading.gif’,attempt: 1})3,修改圖片的路徑，設置為懶加載的形式，將src改成v-lazy

<img v-lazy='psdimg' />

今天踩過的坑總結。

當遇到是v-for循環的時候，或者用div包裹著img的時候，需要在div上面添加v-lazy-container='{ selector: ’img’ }'

<div v-lazy-container='{ selector: ’img’ }'> <img data-src='https://domain.com/img1.jpg'> <img data-src='https://domain.com/img2.jpg'> <img data-src='https://domain.com/img3.jpg'> </div> 或者這種： <div>v-lazy-container='{ selector: ’img’ }'class='contentDiv construction'v-html='content'></div>

以及我將html里面的圖片路徑拿到后，轉換成懶加載的時候，

一定是 data-src，而不是v-lazy，要不然在接口獲取的時候，拿到了圖片地址，但是會一直顯示不出來的。

以上就是vue 實現圖片懶加載功能的詳細內容，更多關于vue 圖片懶加載的資料請關注好吧啦網其它相關文章！