用Javascript判断图片是否存在,不存在则显示默认图片的代码

 更新时间:2023年06月15日 00:13:30   投稿:mdxy-dxy  
用Javascript判断图片是否存在,不存在则显示默认图片的代码,需要的朋友可以参考下。

利用image对象的onerror事件来判断,出错则更换image对象的src为默认图片的URL。 

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

下面是通过js的判断

用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('该图片不存在!');">

因为图片不存在则返回该图片不存在!

基于jquery实现的

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

相关文章

  • JavaScript实现下拉列表选择框

    JavaScript实现下拉列表选择框

    这篇文章主要为大家详细介绍了JavaScript实现下拉列表选择框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript中的AOP编程的基本实现

    JavaScript中的AOP编程的基本实现

    面向切面编程给我们提供了一个方法,让我们可以在不修改目标逻辑的情况下,将代码注入到现有的函数或对象中。今天通过本文给大家分享JavaScript中的AOP编程的基本实现方法,需要的朋友参考下吧
    2021-07-07
  • 将中国标准时间转换成标准格式的代码

    将中国标准时间转换成标准格式的代码

    这篇文章主要介绍了将中国标准时间转换成标准格式的方法,需要的朋友可以参考下
    2014-03-03
  • js 异步处理进度条

    js 异步处理进度条

    js 异步处理进度条的实现代码,需要的朋友可以参考下。
    2010-04-04
  • 详解使用fetch发送post请求时的参数处理

    详解使用fetch发送post请求时的参数处理

    这篇文章主要介绍了详解使用fetch发送post请求时的参数处理的相关资料,需要的朋友可以参考下
    2017-04-04
  • JavaScript实现电灯开关小案例

    JavaScript实现电灯开关小案例

    这篇文章主要为大家详细介绍了JavaScript实现电灯开关小案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • js实现上传并压缩图片效果

    js实现上传并压缩图片效果

    这篇文章主要为大家详细介绍了js实现上传并压缩图片的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • antd upload控件的data参数使用

    antd upload控件的data参数使用

    这篇文章主要介绍了antd upload控件的data参数使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • JavaScript中工厂函数与构造函数示例详解

    JavaScript中工厂函数与构造函数示例详解

    这篇文章主要给大家介绍了关于JavaScript中工厂函数与构造函数的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • 监控微信小程序中的慢HTTP请求过程详解

    监控微信小程序中的慢HTTP请求过程详解

    这篇文章主要介绍了监控微信小程序中的慢HTTP请求过程详解,Fundebug 的微信小程序监控插件在 0.5.0 版本已经支持监控 HTTP 请求错误,在小程序中通过wx.request发起 HTTP 请求,如果请求失败,会被捕获并上报,需要的朋友可以参考下
    2019-07-07

最新评论