一個(gè)頁(yè)面圖片比較多的時(shí)候，需要對(duì)界面的圖片進(jìn)行懶加載處理，今天遇到了，做個(gè)懶加載的筆記。

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

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,修改圖片的路徑，設(shè)置為懶加載的形式，將src改成v-lazy

<img v-lazy='psdimg' />

今天踩過(guò)的坑總結(jié)。

當(dāng)遇到是v-for循環(huán)的時(shí)候，或者用div包裹著img的時(shí)候，需要在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里面的圖片路徑拿到后，轉(zhuǎn)換成懶加載的時(shí)候，

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

以上就是vue 實(shí)現(xiàn)圖片懶加載功能的詳細(xì)內(nèi)容，更多關(guān)于vue 圖片懶加載的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！