Jquery判断页面图片是否加载失败的代码
更新时间：2023年06月14日 12:42:48 投稿：mdxy-dxy
这篇文章主要介绍了Jquery判断页面图片是否加载失败,加载失败则显示默认图片的实现方法,需要的朋友可以参考下
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
功能需求
就是判断页面中的图片是不是存在，如果出错了(图片不存在或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="http://9i0i.com/pic.php?p=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="http://9i0i.com/pic.php?p=Image/ad2.png" />
<div>
<div><img src="http://9i0i.com/pic.php?p=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=gbk" />
<script src="http://9i0i.com/pic.php?p=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="http://9i0i.com/pic.php?p=img/bus2.png">
<img src="http://9i0i.com/pic.php?p=img/taxi2.png">
<img src="http://9i0i.com/pic.php?p=img/plane2.png">
<img src="http://9i0i.com/pic.php?p=img/railway2.png">
<div>当图片未找到或者404时，触发 onerror 显示默认的图片，批量处理</div>
<img src="http://9i0i.com/pic.php?p=img/bus22.png" class="more">
<img src="http://9i0i.com/pic.php?p=img/taxi22.png" class="more">
<img src="http://9i0i.com/pic.php?p=img/plane22.png" class="more">
<img src="http://9i0i.com/pic.php?p=img/railway22.png" class="more">
<div>若是默认图片也没找到，会引起崩溃，设置this.onerror='';显示裂图图标</div>
<img src="http://9i0i.com/pic.php?p=img/bus22.png" class="error">
<img src="http://9i0i.com/pic.php?p=img/taxi22.png" class="error">
<img src="http://9i0i.com/pic.php?p=img/plane22.png" class="error">
<img src="http://9i0i.com/pic.php?p=img/railway22.png" class="error">
</div>
</body>
</html>到此这篇关于Jquery判断页面图片是否加载失败的代码的文章就介绍到这了,更多相关Jquery图片是否加载失败内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！
相关文章
修改checkbox时..jquery在取checked值时总是出这样那样的问题....各个版本之间还有少许的差异....当向后台发送数据后,,再返回到当前页时..checked的状态始终不对2012-08-08
这篇文章主要介绍了jQuery获取单击节点对象的方法,涉及jQuery操作鼠标事件与页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
这篇文章主要介绍了JQuery 获取除某指定对象外的其他对象 （ :not() 与.not()）,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了jQuery操作cookie的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
这篇文章主要介绍了jquery判断input值不为空的方法的相关资料,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了jQuery实现表单动态添加数据并提交的方法,结合实例形式总结分析了jQuery针对存在form表单的添加、提交,不存在form表单的添加、提交,ajax、非ajax形式提交等数据添加与表单提交操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了jquery实现鼠标悬浮停止轮播特效，鼠标悬停在图片上则停止轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
使用jQuery获取radio/checkbox组的值的代码收集
很久没有写JQuery的文章了。今天来看下JQ对天Checkbox复选框的操作。看下面的一个小例子。在这个例子中包括了以下几个功能2009-12-12
Tooltip（提示框）是一种常见的效果，它通常用在需要进一步解释、说明或提示的某个词上。这种小效果实现起来虽然不难，但如果你想不劳而获，可以试试 Tips。2015-07-07
在javascript中我们常常要改变dom的css样式 ，同样Jquery也对改变css做了封装不用我们去用 getElementByid().style.……来操作了2010-04-04
最新评论