如何使用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函数排序的实例代码
Jul 01 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
JavaScript cookie原理及使用实例
May 08 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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/04/09 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
索趣科技的答案
2007/02/07 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
js实现缓动动画
2020/11/25 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
会计职业生涯规划书
2014/01/13 职场文书
自荐信的基本格式
2014/02/22 职场文书
行政诉讼答辩状
2015/05/21 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android
SQLServer常见数学函数梳理总结
2022/08/05 MySQL