js/jquery判斷圖片是否存在的函數(shù)代碼
1、js函數(shù)判斷
這個(gè)方法，我用了下，同一個(gè)圖片路徑，vue的環(huán)境下，本地是可以的，但是不知道為什么到了正式環(huán)境，存在的圖片也被判斷為了false
//判斷圖片是否存在
function checkImgExists(imgurl) {
var ImgObj = new Image(); //判斷圖片是否存在
ImgObj.src = imgurl;
//存在圖片
if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
return true;
} else {
return false;
}
}注意：使用這種方法進(jìn)行判斷圖片是否存在時(shí)，不存在時(shí)會(huì)報(bào)404錯(cuò)誤，建議使用ajax去后臺(tái)查看圖片是否尋在。
若不介意404錯(cuò)誤,<img>標(biāo)簽有onerror事件可以在找不到當(dāng)前的src時(shí)去加載onerror事件去找到默認(rèn)圖片。
2、JS+XMLHTTP
var oreq = new ActiveXObject("Microsoft.XMLHTTP")（僅限IE內(nèi)核）
oreq.open("Get","blog/attachments/month_0606/s2006610204959.jpg",false);
oreq.send();
alert(oReq.status)
if(oReq.status==404)
alert('不存在');
else
alert("存在")
}3、可以使用img標(biāo)簽的error方法
js：onerror后面可以直接放上備用圖片，也可以直接寫方法
<img onerror="javascript:this.src='https://t.jb51.net/upload/vod/3a03d.jpg';" src="http://www.fzitv.net/upload/vod/3a03d.jpg" >
vue：error后面跟方法，根據(jù)變量顯示別的
<img v-if="item.showImg" @error="noExistImg(item)" :src="`${constants.ICONS_CHANNEL}/${item.channel.toLowerCase()}.png`" style="width: 45px;" alt="">
<span v-else class="textLogo">{{item.channelName.substr(0,1)}}</span>
noExistImg (record) {
this.publishAccountArr.map(item => {
if (item.id === record.id) {
item.showImg = false
}
})
}4、幾種函數(shù)小結(jié)
function CheckImgExists(imgurl) {
var ImgObj = new Image(); //判斷圖片是否存在
ImgObj.src = imgurl;
//沒有圖片，則返回-1
if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
return true;
} else {
return false;
}
}
// 3
function validateImage(url) {
var xmlHttp;
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("Get", url, false);
xmlHttp.send();
if (xmlHttp.status == 404)
return false;
else
return true;
}<img src="./../image/109951166130586688.jpg" alt=""
onerror="javascript:this.src='./../image/37f5e12a82766d690accd5ee86a08b0.png';">5、JS中驗(yàn)證圖片是否存在
使用場(chǎng)景：當(dāng)不確定圖片是否存在，實(shí)現(xiàn)當(dāng)圖片不存在時(shí)，自動(dòng)發(fā)出請(qǐng)求到服務(wù)端生成新圖片或記錄日志
代碼一
// 驗(yàn)證圖片是否存在
const checkImgExists = (imgUrl: string) => {
return new Promise(function (resolve, reject) {
const ImgObj = new Image();
ImgObj.src = imgUrl;
ImgObj.onload = (res) => {
resolve(res);
}
ImgObj.onerror = (err) => {
reject(err)
}
})
}代碼二
checkImgExists(imgUrl) {
return new Promise(function (resolve, reject) {
const ImgObj = new Image();
ImgObj.src = imgUrl;
ImgObj.onload = (res) => {
resolve(res);
};
ImgObj.onerror = (err) => {
reject(err);
};
});
}
checkImgExists(url)
.then(() => {
this.imgUrl = url;
})
.catch(() => {
this.imgUrl = null;
});到此這篇關(guān)于js/jquery判斷圖片是否存在的函數(shù)代碼的文章就介紹到這了,更多相關(guān)jquery判斷圖片是否存在內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
最近做項(xiàng)目做一個(gè)樹狀的下拉列表，下面小編把easyUI創(chuàng)建人員樹的實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)，需要的朋友參考下吧2017-09-09
全面解析jQuery中的$(window)與$(document)的用法區(qū)別
這篇文章主要介紹了jQuery中的$(window)與$(document)的用法區(qū)別，具體內(nèi)容大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08
jQuery實(shí)現(xiàn)下拉框選擇圖片功能實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)下拉框選擇圖片功能,可實(shí)現(xiàn)帶圖片的下拉列表功能,涉及jquery插件imageselect.js的使用,需要的朋友可以參考下2015-08-08
如果你不知道什么是jQuery autocomplete插件，請(qǐng)看圖。你可以測(cè)試一下本站的搜索。當(dāng)然也可以百度一下。2009-04-04
jquery動(dòng)態(tài)加載js/css文件方法(自寫小函數(shù))
jquery自帶的getSrcript文件只能動(dòng)態(tài)加載js代碼，但不能加載css，后來自己寫了一個(gè)可加載js與css的程序2014-10-10
JQERY limittext 插件0.2版(長內(nèi)容限制顯示)
使用ajaxfileupload.js實(shí)現(xiàn)ajax上傳文件php版
關(guān)于Jquery操作Cookie取值錯(cuò)誤的解決方法