如何基于JavaScript判斷圖片是否加載完成
這篇文章主要介紹了如何基于JavaScript判斷圖片是否加載完成,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這里我用了一個(gè)tag來判斷顯示哪個(gè)樣式,但是tag是寫在了setTimeOut里面的,是一個(gè)延時(shí)函數(shù),異步的操作。延時(shí)300ms的目的就是為了等待圖片加載出來,但是當(dāng)網(wǎng)絡(luò)慢的時(shí)候是滿足不了的。網(wǎng)絡(luò)慢圖片沒有加載出來300ms之后就會(huì)直接走入false,會(huì)提示用戶重新獲取圖片,但其實(shí)圖片已經(jīng)返回回來了。
所以這樣的做法是很不靈活的。
剛開始的代碼如下:
html:
<div v-if="!it.sealTag"><br> <img :src="it.style"><br></div><br><div v-if="it.sealTag && it.isSys" style="margin-top:70px;"> <p >圖片丟失,請(qǐng)點(diǎn)擊<span @click="resetSign()">重新生成</span></p> </div>js
js修改前:
this.list = res.data; this.list.forEach((it) => { it.style = catUrl()+'seal/pic/' + it.sealPath; //判斷sealpath能不能使用 let ImgObj = new Image(); //判斷圖片是否存在 ImgObj.src = catUrl()+'seal/pic/' + it.sealPath; setTimeout(()=>{ if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) { //false:sealpath不可用,true:sealPath可用 this.$set(it,'sealTag',true); } else { this.sealId = it.id; this.$set(it,'sealTag',false); } },300)});
不能用setTimeOut()的原因是,網(wǎng)絡(luò)慢的時(shí)候圖片沒有加載出來,ImgObj.fileSize,ImgObj.width,ImgObj.height這些都不存在,就返回到false。而等圖片加載出來的時(shí)候,vue頁面早就渲染完了。
解決辦法
此時(shí)用img的onload方法判斷圖片是否已經(jīng)加載完成。
js修改后:
this.list = res.data; this.list.forEach((it) => { //判斷sealpath能不能使用 let ImgObj = new Image(); //判斷圖片是否存在 ImgObj.onload = () => { if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) { // 判斷圖片的sealpath能不能正常顯示圖片 // sealTag:false 不顯示 重新生成 的提示 this.$set(it,'sealTag',false); } } // sealTag:true 要顯示 重新生成 的提示 ImgObj.onerror = () => { this.sealId = it.id; this.$set(it,'sealTag',true); } it.style = catUrl()+'seal/pic/' + it.sealPath; ImgObj.src = catUrl()+'seal/pic/' + it.sealPath; });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)判斷圖片是否加載完成的方法分析
- JavaScript & jQuery完美判斷圖片是否加載完畢
- JS判斷圖片是否加載完成方法匯總(最新版)
- js判斷圖片加載完成后獲取圖片實(shí)際寬高的方法
- JavaScript判斷圖片是否已經(jīng)加載完畢的方法匯總
- js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載
- 使用JavaScript判斷圖片是否加載完成的三種實(shí)現(xiàn)方式
- js判斷背景圖片是否加載成功使用img的width實(shí)現(xiàn)
- 關(guān)于JS判斷圖片是否加載完成且獲取圖片寬度的方法
- js或者jquery判斷圖片是否加載完成實(shí)現(xiàn)代碼
相關(guān)文章
7個(gè)你應(yīng)該知道的JS原生錯(cuò)誤類型
這篇文章主要介紹了7個(gè)你應(yīng)該知道的JS原生錯(cuò)誤類型,對(duì)此感興趣的同學(xué),可以參考一下2021-04-04JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記(十五) 瀏覽器中的JavaScript
Window對(duì)象對(duì)操作瀏覽器窗口非常有用,開發(fā)者可以移動(dòng)或調(diào)整瀏覽器窗口的大小2012-08-08JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法示例【二分查找法、計(jì)算重復(fù)次數(shù)】
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之檢索算法,結(jié)合實(shí)例形式分析了二分查找法、計(jì)算重復(fù)次數(shù)相關(guān)算法原理與使用技巧,需要的朋友可以參考下2019-02-02前端實(shí)現(xiàn)文本對(duì)比并高亮顯示差異的方法
文本對(duì)比是一個(gè)常見需求,尤其在版本控制和代碼編輯中,本文介紹了如何使用jsdiff庫和diff2html工具來實(shí)現(xiàn)文本內(nèi)容的差異比較和美化顯示,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09JS+CSS實(shí)現(xiàn)的藍(lán)色table選項(xiàng)卡效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的藍(lán)色table選項(xiàng)卡效果,通過鼠標(biāo)事件調(diào)用自定義函數(shù)實(shí)現(xiàn)頁面元素樣式的遍歷與動(dòng)態(tài)切換效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10