vue 實(shí)現(xiàn)圖片懶加載功能
更新時(shí)間：2020年12月31日 11:59:18 作者：熊大的小跟班
這篇文章主要介紹了vue 實(shí)現(xiàn)圖片懶加載功能的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
一個(gè)頁面圖片比較多的時(shí)候，需要對(duì)界面的圖片進(jìn)行懶加載處理，今天遇到了，做個(gè)懶加載的筆記。
1，需要安裝vue的懶加載插件。
npm install vue-lazyload --save-dev
2，需要在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" class="psd" />
今天踩過的坑總結(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="http://domain.com/img1.jpg">
<img data-src="http://domain.com/img2.jpg">
<img data-src="http://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ì)一直顯示不出來的。
以上就是vue 實(shí)現(xiàn)圖片懶加載功能的詳細(xì)內(nèi)容，更多關(guān)于vue 圖片懶加載的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
使用Vue.set()方法實(shí)現(xiàn)響應(yīng)式修改數(shù)組數(shù)據(jù)步驟
今天小編就為大家分享一篇使用Vue.set()方法實(shí)現(xiàn)響應(yīng)式修改數(shù)組數(shù)據(jù)步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue3的基本使用方法,結(jié)合實(shí)例形式詳細(xì)分析了vue3功能、組件、生命周期、TypeScript結(jié)合運(yùn)用等相關(guān)概念與使用方法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了?vue利用openlayers加載天地圖和高德地圖，下文章主要由兩部分完成openlayers加載天地圖和加載高德地圖，下面來看看詳細(xì)內(nèi)容吧,需要的朋友可以參考一下，希望對(duì)大家有所幫助2021-11-11
vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端原生小球滑塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn)
本文主要介紹了vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue中v-for和v-if不能在同一個(gè)標(biāo)簽使用的最新解決方案
這篇文章主要介紹了vue中v-for和v-if不能在同一個(gè)標(biāo)簽的最新解決方案,這里描述了兩種解決方案，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
有時(shí)候我們希望在指定的位置輸出我們的子元素,這時(shí)候具名插槽就排上了用場(chǎng),這篇文章主要給大家介紹了關(guān)于Vue中插槽Slot基本使用與具名插槽的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue 原生實(shí)現(xiàn)右鍵菜單組件功能，本文給大家擴(kuò)展知識(shí)點(diǎn)vue點(diǎn)擊菜單以外區(qū)域，隱藏菜單操作，通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-12-12
vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件
這篇文章主要介紹了vue3一個(gè)元素如何綁定兩個(gè)或多個(gè)事件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue中的slots/scoped slots,本文實(shí)例代碼相結(jié)合的形式給大家介紹了slots的工作原理，需要的朋友可以參考下2018-04-04