vue項(xiàng)目中圖片懶加載時(shí)出現(xiàn)的問題及解決
vue圖片懶加載的問題
項(xiàng)目中遇到一個(gè)問題，記錄一下，vue項(xiàng)目中前期沒有做圖片懶加載的時(shí)候，當(dāng)圖片出現(xiàn)錯(cuò)誤或者顯示路徑不對(duì)，我加了onerror事件進(jìn)行錯(cuò)誤監(jiān)聽并添加一張默認(rèn)的圖片，優(yōu)化用戶體驗(yàn)。
后期因?yàn)閳D片數(shù)量變多，所以加入了圖片懶加載，但在懶加載中掛載時(shí)只加了loading的圖片，沒有加error，所以導(dǎo)致頁(yè)面圖片未正常加載的地方出現(xiàn)默認(rèn)圖片閃爍的現(xiàn)象，最后在掛載時(shí)加入error引入一張默認(rèn)圖片就好了
vue圖片懶加載實(shí)現(xiàn)步驟
1.安裝插件
npm install vue-lazyload --save-dev
2.main.js中引入，掛載
import Vuelazyload from 'vue-lazyload'
Vue.use(Vuelazyload, {
? ? ? ?error: require('../static/img/nonelive.png'),
? ? ? ?loading: require('../static/img/nonelive.png')
})3.在渲染結(jié)構(gòu)的地方把：src換成v-lazy即可
<img v-lazy="item.pictureUrl?item.pictureUrl:'../../../static/img/nonelive.png'" alt="圖片未顯示" οnerrοr="this.src='../../../static/img/nonelive.png'">
vue圖片懶加載踩過的坑
一個(gè)頁(yè)面圖片比較多的時(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ì)一直顯示不出來(lái)的。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在 Vue 應(yīng)用中使用 Netlify 表單功能的方法詳解
Netlify 帶有內(nèi)置表單處理功能，可以用來(lái)存儲(chǔ)表單數(shù)據(jù)，下載 csv 文件，同時(shí)可以在接收到新的提交時(shí)發(fā)送郵件通知或者通過配置 webhook 發(fā)送請(qǐng)求。這篇文章主要介紹了在 Vue 應(yīng)用中使用 Netlify 表單功能,需要的朋友可以參考下2019-06-06
關(guān)于vue 結(jié)合原生js 解決echarts resize問題
這篇文章主要介紹了關(guān)于vue 結(jié)合原生js 解決echarts resize問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07
本篇文章主要介紹了Vue監(jiān)測(cè)數(shù)據(jù)的原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看2021-10-10
這篇文章主要介紹了vue實(shí)現(xiàn)固定位置顯示功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作
這篇文章主要介紹了在vue中動(dòng)態(tài)修改css其中一個(gè)屬性值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-12-12
elementui中使用el-tabs切換實(shí)時(shí)更新數(shù)據(jù)
這篇文章主要介紹了elementui中使用el-tabs切換實(shí)時(shí)更新數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3+element?Plus實(shí)現(xiàn)表格前端分頁(yè)完整示例
這篇文章主要給大家介紹了關(guān)于vue3+element?Plus實(shí)現(xiàn)表格前端分頁(yè)的相關(guān)資料,雖然很多時(shí)候后端會(huì)把分頁(yè),搜索,排序都做好,但是有些返回?cái)?shù)據(jù)并不多的頁(yè)面,或者其他原因不能后端分頁(yè)的通常會(huì)前端處理,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue中的自定義屬性并獲得屬性的值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
超詳細(xì)的5個(gè)Shell腳本實(shí)例分享(值得收藏)
這篇文章主要介紹了超詳細(xì)的5個(gè)Shell腳本實(shí)例分享(值得收藏),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改的解決
本文主要介紹了vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01