如何使用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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
JavaScript Archive Network 集合
May 12 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
async/await地狱该如何避免详解
May 10 Javascript
页面点击小红心js实现代码
May 26 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
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知道与问问的采集插件代码
2010/10/12 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php对接java现实加签验签的实例
2016/11/25 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
AngularJS实现注册表单验证功能
2017/10/16 Javascript
python提取页面内url列表的方法
2015/05/25 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python基于SMTP协议发送邮件
2019/05/31 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
机械专业毕业生推荐信范文
2013/11/25 职场文书
高中自我鉴定
2013/12/20 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
公司运动会策划方案
2014/05/25 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
市场部岗位职责
2015/02/12 职场文书
幼儿园个人总结
2015/02/28 职场文书
收银员岗位职责范本
2015/04/07 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
学习经验交流会总结
2015/11/02 职场文书
小学毕业教师寄语
2019/06/21 职场文书