JavaScript判断图片是否存在及加载失败的解决方案

作者:小括号时间:2026-10-30 10:01:10浏览:369

本文介绍在JavaScript中判断图片是否存在的多种方法。包括利用onerror事件在加载失败时切换默认图片,以及通过XMLHttpRequest或ActiveXObject检测图片链接有效性。内容涵盖直接判断、重试机制及基于jQuery的实现方案,帮助开发者处理图片加载异常。

可以通过监听 image 对象的 onerror 事件来实现判断。当图片加载出错时,触发该事件并将 image 对象的 src 属性重新赋值为默认图片的 URL。

<p>第一种情况:图片存在,正常显示<br />
<img src="https://www.jb51.net/logo.gif"
onerror="javascript:this.src='//www.jb51.net/logos.gif'" /></p>
<p>第二种情况:图片不存在,显示默认图片<br />
<img src="https://www.jb51.net/logoddd.gif"
onerror="javascript:this.src='//www.jb51.net/logos.gif'" /></p>

以下是通过 JavaScript 进行判断的具体实现方式。

使用 JavaScript 判断指定图片文件是否存在:例如判断 <img src="//www.jb51.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("//www.jb51.net/logos.gif"))
</script>

若图片存在,上述方法将返回 true。

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

若图片存在,响应内容可能返回 GIF89aX。

<img src="//www.jb51.net/logos2.gif" onerror="alert('该图片不存在!');">

由于图片不存在,将触发 onerror 事件并返回“该图片不存在!”的提示。

基于 jQuery 实现的方案

在 JavaScript 中判断图片链接是否有效,以及能否正常访问。

//判断图片是否存在
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 判断图片是否存在,不存在则显示默认图片的代码的文章就介绍到这了,更多相关判断图片是否存在内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

作者最新文章