用Javascript判斷圖片是否存在，不存在則顯示默認圖片的代碼
更新時間：2023年06月15日 00:13:30 投稿：mdxy-dxy
用Javascript判斷圖片是否存在，不存在則顯示默認圖片的代碼,需要的朋友可以參考下。
利用image對象的onerror事件來判斷，出錯則更換image對象的src為默認圖片的URL。
<p>第一種情況：圖片存在，正常顯示<br /> <img src="http://m.fzitv.net/logo.gif" onerror="javascript:this.src='//m.fzitv.net/logos.gif'" /></p> <p>第二種情況：圖片不存在，顯示默認圖片<br /> <img src="http://m.fzitv.net/logoddd.gif" onerror="javascript:this.src='//m.fzitv.net/logos.gif'" /></p>
下面是通過js的判斷
用javascript判斷指定圖片文件是否存在:
如判斷<img src="//m.fzitv.net/logos.gif">這個圖片地址是否存在.
如果不存在,隔幾秒重新探測此圖片,如果地址有效則,提示地址有效
<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://m.fzitv.net/logos.gif"))
</script>圖片存在則上面的返回true
<SCRIPT language="javascript">
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.Open("GET", "http://m.fzitv.net/logos.gif", false);
xmlhttp.Send();
alert(xmlhttp.responseText);
</SCRIPT>圖片存在則返回GIF89aX
<img src="//m.fzitv.net/logos2.gif" onerror="alert('該圖片不存在!');">
因為圖片不存在則返回該圖片不存在!
基于jquery實現(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;
}
}到此這篇關于用Javascript判斷圖片是否存在，不存在則顯示默認圖片的代碼的文章就介紹到這了,更多相關判斷圖片是否存在內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)下拉列表選擇框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
面向切面編程給我們提供了一個方法，讓我們可以在不修改目標邏輯的情況下，將代碼注入到現(xiàn)有的函數(shù)或?qū)ο笾小＝裉焱ㄟ^本文給大家分享JavaScript中的AOP編程的基本實現(xiàn)方法，需要的朋友參考下吧2021-07-07
這篇文章主要介紹了將中國標準時間轉(zhuǎn)換成標準格式的方法,需要的朋友可以參考下2014-03-03
js 異步處理進度條的實現(xiàn)代碼，需要的朋友可以參考下。2010-04-04
詳解使用fetch發(fā)送post請求時的參數(shù)處理
這篇文章主要介紹了詳解使用fetch發(fā)送post請求時的參數(shù)處理的相關資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)電燈開關小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)上傳并壓縮圖片的相關代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了antd upload控件的data參數(shù)使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
JavaScript中工廠函數(shù)與構(gòu)造函數(shù)示例詳解
這篇文章主要給大家介紹了關于JavaScript中工廠函數(shù)與構(gòu)造函數(shù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
這篇文章主要介紹了監(jiān)控微信小程序中的慢HTTP請求過程詳解，F(xiàn)undebug 的微信小程序監(jiān)控插件在 0.5.0 版本已經(jīng)支持監(jiān)控 HTTP 請求錯誤，在小程序中通過wx.request發(fā)起 HTTP 請求，如果請求失敗，會被捕獲并上報,需要的朋友可以參考下2019-07-07