如何使用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 相关文章推荐
js页面跳转常用的几种方式
Nov 25 Javascript
一个网马的tips实现分析
Nov 28 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
JS自定义滚动条效果
Mar 13 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 include的妙用,实现路径加密
2008/07/29 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
网上抓的一个特效
2007/05/11 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
Python读写unicode文件的方法
2015/07/10 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
python 显示数组全部元素的方法
2018/04/19 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python写程序统计词频的方法
2019/07/29 Python
python连接PostgreSQL过程解析
2020/02/09 Python
浅谈python print(xx, flush = True) 全网最清晰的解释
2020/02/21 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
主题团日活动总结
2014/06/25 职场文书
为自己工作观后感
2015/06/11 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA