Jquery判断页面图片是否加载失败的代码
更新时间：2023年06月14日 12:42:48 投稿：mdxy-dxy
这篇文章主要介绍了Jquery判断页面图片是否加载失败,加载失败则显示默认图片的实现方法,需要的朋友可以参考下
功能需求
就是判断页面中的图片是不是存在，如果出错了(图片不存在或cdn没同步)就可以临时用默认图片显示，增加了用户友好度
实现代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
ImageLoadEx();
});
function ImageLoadEx() { //加载不到 图片 时显示 默认图片
$('img').error(function () { //加载图片 出现404状态时触发
$(this).attr("src", "Image/default.jpg"); //将加载不到的图片 的src属性 修改成默认 图片 ，注意：默认图片必须保证存在，否则 会一直 调用 此函数
});
}
</script>
</head>
<body>
<img src="Image/ad2.png" />
<div>
<div><img src="ad2.png" /></div>
</div>
</body>
</html>注意：ImageLoadEx() 必须在浏览器渲染 img HTML标签 完成 之后执行，如果 img 标签是用js动态添加的 请在添加完成后 重新调用一下ImageLoadEx()函数
下面是其它网友的补充
jQuery-图片加载失败时，显示默认图片
1、正常显示图片；
<img src="img/bus2.png">
2、当图片未找到或者404时，触发 onerror 显示默认的图片；
<img src="img/bus22.png" onerror="this.src='img/default.png'">
3、若是默认图片也没找到，会引起崩溃，这时候可以通过设置this.οnerrοr='';显示裂图图标
<img src="img/bus22.png" onerror="this.onerror='';this.src='img/default2.png'">
4、多个图片时，可以批量设置默认图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $img = $("img.more");
for(i = 0; i < $img.length; i++){
$img.eq(i).attr("onerror","this.src='img/default.png'");
}
var $img = $("img.error");
for(i = 0; i < $img.length; i++){
$img.eq(i).attr("onerror","this.onerror='';this.src='img/default2.png'");
}
});
</script>
<style type="text/css">
.item{
width: 400px;
height: 400px;
margin:auto;
}
</style>
</head>
<body>
<div class="item">
<div>正常显示的多个图片</div>
<img src="img/bus2.png">
<img src="img/taxi2.png">
<img src="img/plane2.png">
<img src="img/railway2.png">
<div>当图片未找到或者404时，触发 onerror 显示默认的图片，批量处理</div>
<img src="img/bus22.png" class="more">
<img src="img/taxi22.png" class="more">
<img src="img/plane22.png" class="more">
<img src="img/railway22.png" class="more">
<div>若是默认图片也没找到，会引起崩溃，设置this.onerror='';显示裂图图标</div>
<img src="img/bus22.png" class="error">
<img src="img/taxi22.png" class="error">
<img src="img/plane22.png" class="error">
<img src="img/railway22.png" class="error">
</div>
</body>
</html>到此这篇关于Jquery判断页面图片是否加载失败的代码的文章就介绍到这了,更多相关Jquery图片是否加载失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
快速回到页首的方法有很多，在本文为大家介绍下使用jquery是如何做到的2013-12-12
很多人可能都会遇到在调试的时候用了return了false，可为什么还会提交呢？这个问题我最近也碰到了，尝试了多次也没有用，后来终于发现了其中的问题，下面分享处理给大家，让同样遇到这个问题的朋友们能够看看，有需要的朋友们下面来一起看看吧。2016-10-10
好的web api应该在url里面有足够的信息，并且每个资源方法有它对应的url。2011-08-08
这篇文章主要介绍了使用jQuery制作遮罩层弹出效果的极简实例分享,效果中背景为半透冥且不可操作,在制作页面上传功能等场景下十分实用,需要的朋友可以参考下2016-05-05
用JavaScript使页面上的一组checkbox全选/取消全选，逻辑很简单，实现代码也没有太难的语法。但使用jQuery实现则更简单，代码也很简洁，精辟！2009-11-11
判断checkbox是否选中的方法有很多，不过都是大同小异，下面为大家介绍下使用jquery是如何做到的，下面有个不错的示例，感兴趣的朋友可以参考下2013-12-12
这篇文章主要介绍了jQuery validate插件功能与用法,结合实例形式详细分析了jQuery validate插件的功能、参数、使用方法与相关注意事项,需要的朋友可以参考下2016-12-12
利用jquery的fadeTo方法可以简单的制作一些很不错的动画效果.可以使图片或者文字或者区块以不同的透明度效果出现.例如以下练习实例，感兴趣的朋友可以参考下哈2013-05-05
下面小编就为大家分享一篇实时监控input框,实现输入框与下拉框联动的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细介绍了jQuery实现鼠标经过事件的延时处理效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
最新评论