如何使用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对文章内容进行分页示例代码
Mar 05 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
Python机器学习之决策树和随机森林
Jul 15 Javascript
从原生JavaScript到React深入理解
Jul 23 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自动跳转中英文页面
2008/07/29 PHP
PHP 数组遍历顺序理解
2009/09/09 PHP
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
centos系统升级python 2.7.3
2014/07/03 Python
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
Python 远程开关机的方法
2020/11/18 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
普天C++笔试题
2016/03/20 面试题
财务经理的岗位职责
2013/12/17 职场文书
购房协议书范本
2014/04/11 职场文书
大三学习计划书范文
2014/05/02 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
2015年工会工作总结
2015/03/30 职场文书
营业员岗位职责范本
2015/04/14 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
Python实现抖音热搜定时爬取功能
2022/03/16 Python