用Javascript判斷圖片是否存在，不存在則顯示默認(rèn)圖片的代碼

更新時(shí)間：2023年06月15日 00:13:30 投稿：mdxy-dxy

用Javascript判斷圖片是否存在，不存在則顯示默認(rèn)圖片的代碼,需要的朋友可以參考下。

利用image對象的onerror事件來判斷，出錯(cuò)則更換image對象的src為默認(rèn)圖片的URL。

<p>第一種情況：圖片存在，正常顯示<br />
<img src="http://www.dhdzp.com/logo.gif"
onerror="javascript:this.src='//www.dhdzp.com/logos.gif'" /></p>
<p>第二種情況：圖片不存在，顯示默認(rèn)圖片<br />
<img src="http://www.dhdzp.com/logoddd.gif"
onerror="javascript:this.src='//www.dhdzp.com/logos.gif'" /></p>

下面是通過js的判斷

用javascript判斷指定圖片文件是否存在:
如判斷<img src="//www.dhdzp.com/logos.gif">這個(gè)圖片地址是否存在.
如果不存在,隔幾秒重新探測此圖片,如果地址有效則,提示地址有效

<script type="text/javascript">
function IsExist(url)
{
x = new ActiveXObject("Microsoft.XMLHTTP")
x.open("HEAD",url,false)
x.send()
return x.status==200
}
alert(IsExist("http://www.dhdzp.com/logos.gif"))
</script>

圖片存在則上面的返回true

<SCRIPT language="javascript">
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.Open("GET", "http://www.dhdzp.com/logos.gif", false);
xmlhttp.Send();
alert(xmlhttp.responseText);
</SCRIPT>

圖片存在則返回GIF89aX

因?yàn)閳D片不存在則返回該圖片不存在!

基于jquery實(shí)現(xiàn)的

在js中判斷圖片鏈接是否有效，能否正常訪問

//判斷圖片是否存在
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;
     }
}

到此這篇關(guān)于用Javascript判斷圖片是否存在，不存在則顯示默認(rèn)圖片的代碼的文章就介紹到這了,更多相關(guān)判斷圖片是否存在內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

圖片是否存在

相關(guān)文章

JavaScript實(shí)現(xiàn)下拉列表選擇框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)下拉列表選擇框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
JavaScript中的AOP編程的基本實(shí)現(xiàn)
面向切面編程給我們提供了一個(gè)方法，讓我們可以在不修改目標(biāo)邏輯的情況下，將代碼注入到現(xiàn)有的函數(shù)或?qū)ο笾小＝裉焱ㄟ^本文給大家分享JavaScript中的AOP編程的基本實(shí)現(xiàn)方法，需要的朋友參考下吧
2021-07-07
將中國標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的代碼
這篇文章主要介紹了將中國標(biāo)準(zhǔn)時(shí)間轉(zhuǎn)換成標(biāo)準(zhǔn)格式的方法,需要的朋友可以參考下
2014-03-03
js 異步處理進(jìn)度條
js 異步處理進(jìn)度條的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
2010-04-04
詳解使用fetch發(fā)送post請求時(shí)的參數(shù)處理
這篇文章主要介紹了詳解使用fetch發(fā)送post請求時(shí)的參數(shù)處理的相關(guān)資料,需要的朋友可以參考下
2017-04-04
JavaScript實(shí)現(xiàn)電燈開關(guān)小案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)電燈開關(guān)小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
js實(shí)現(xiàn)上傳并壓縮圖片效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)上傳并壓縮圖片的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
antd upload控件的data參數(shù)使用
這篇文章主要介紹了antd upload控件的data參數(shù)使用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-02-02
JavaScript中工廠函數(shù)與構(gòu)造函數(shù)示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中工廠函數(shù)與構(gòu)造函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
監(jiān)控微信小程序中的慢HTTP請求過程詳解
這篇文章主要介紹了監(jiān)控微信小程序中的慢HTTP請求過程詳解，F(xiàn)undebug 的微信小程序監(jiān)控插件在 0.5.0 版本已經(jīng)支持監(jiān)控 HTTP 請求錯(cuò)誤，在小程序中通過wx.request發(fā)起 HTTP 請求，如果請求失敗，會被捕獲并上報(bào),需要的朋友可以參考下
2019-07-07