如何使用jQuery来处理图片坏链具体实现步骤


Posted in Javascript onMay 02, 2013

今天我为大家讲解一个页面开发过程中的一个小技巧:如何处理裂图
也就是说如果这个图片没有加载成功了会怎么办?
第一步:HTML页面里:

<!DOCTYPE html> 
<html> 
<head> 
<title>gbin1</title> 
<meta charset=utf-8 /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script> 
</head> 
<body> 
<img src="broken.jpg"/> 
</body> 
</html>

运行这个页面大家会看到一个坏掉的图。
第二部:是一个JavaScript,它的功能是:如果图片坏掉了,就弹出一个出错提示:
$(function(){ 
$('img').error(function(){ 
alert('error'); 
}); 
});

运行一下,大家看到了吗?
第三部:接下来,我们想要提高界面的友好效果,我们可以调用attr用一张默认图片替换掉这张裂图:
$(function(){ 
$('img').error(function(){ 
//alert('error'); 
$(this).attr('src','http://www.gbtags.com/gb/networks/themes/img/logohover.png'); 
}); 
});

大家看到极客标签的logo图标没?这样就可以实现对裂图的处理了。
补充几句:其实error在jquery1.8以前是提倡使用的,1.9之后不太提倡了,但是仍然可以使用,个人觉得还挺方便的。
大家也可以换用下面这个方法:(error换成了on,后面加一个参数)
$(function(){ 
$('img').on('error',function(){ 
alert('error'); 
$(this).attr('src','http://www.gbtags.com/gb/networks/themes/img/logohover.png'); 
}); 
});

其实前一个error方法,是on方法的快捷方式
对了,如果你在本地测试error这个方法的话,需要启动服务器,因为error方法需要检查资源是否可用。比如这个test.html,需要在启动服务器后,在浏览器中输入http://localhost:8080/test.html 才可以看到效果。
希望能对大家有帮助,3Q!
Javascript 相关文章推荐
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
leaflet的开发入门教程
Nov 17 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 #Javascript
JavaScript 实现类的多种方法实例
May 01 #Javascript
Json字符串转换为JS对象的高效方法实例
May 01 #Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 #Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 #Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 #Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 #Javascript
You might like
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
2011/08/23 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
详解Python编程中基本的数学计算使用
2016/02/04 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python格式化输出%s和%d
2018/05/07 Python
TensorFlow的权值更新方法
2018/06/14 Python
python实现浪漫的烟花秀
2019/01/30 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
tensorboard显示空白的解决
2020/02/15 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
实习生自我评价
2014/01/18 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
护士实习求职信
2014/06/22 职场文书
离婚被告答辩状
2015/05/22 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS