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

今天我为大家讲解一个页面开发过程中的一个小技巧：如何处理裂图
也就是说如果这个图片没有加载成功了会怎么办？
第一步：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！

赞 (0)

相关推荐

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

    今天我为大家讲解一个页面开发过程中的一个小技巧:如何处理裂图 也就是说如果这个图片没有加载成功了会怎么办? 第一步:HTML页面里: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>gbin1</title> <meta charset=utf-8 /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.

  • C语言实现链栈的步骤

    C语言实现链栈的步骤

    链栈图解 链栈的常规操作 /********************* 链栈的常规操作 ****************************/ LinkStack InitLinkStack(); // 初始化链栈 int StackEmpty(); // 判断链栈空 int StackLength(); // 求链栈长(链栈元素个数) int Push(); // 入栈 压栈 ElemType Pop(); // 出栈 弹栈 void DestroyStack(); // 销毁链栈 /**

  • 模仿jQuery each函数的链式调用

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> &l

  • Jquery UI震动效果实现原理及步骤

    如果你想你的博客页面某些部分引起读者的注意,你可以使这些部分震动,如广告,今天这篇文章将介绍怎样使你的页面中的元素震动起来. 要达到这个目的我们需要使用到Jquery和Jquery UI. 首先让我创建一个震动块,可以是图片,也可以是普通的dom元素,如div.span等,把元素的id命名为shake,这里可以任意命名. 我们用图片如下: 复制代码 代码如下: <img src="http://jqueryui.com/jquery-wp-content/themes/jquery/ima

  • Jquery使用Firefox FireBug插件调试Ajax步骤讲解

    Jquery使用Firefox FireBug插件调试Ajax步骤讲解

    首先,我们用一个示例来说明JQuery的Ajax调用过程, 实现的一个功能是:点击确认支付按钮之后,实现余额支付的功能: 1.首先在php页面将相关需要调用的函数绑定到按钮上: 复制代码 代码如下: <input type="submit" name="pay_btn" id="pay_btn" value="确认支付" /> <script type="text/javascript"&

  • jquery.pagination.js 无刷新分页实现步骤分享

    jquery.pagination.js 无刷新分页实现步骤分享

    1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个. 首先引用 jquery.pagination.js (分页js),跟pagination.css(分页样式css). 2.页面js代码为 复制代码 代码如下: <script type="text/javascript"> var pageIndex = 0; //页面索引初始值 var pageSize = 15; //每页显示条数初始化,修改显示条数,修改这里即可 $(

  • 使用jquery mobile做幻灯播放效果实现步骤

    使用jquery mobile,可以很容易实现幻灯播放效果,下面讲解下. 1.引入相关的jqury mobile类库 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" />

  • Nginx配置防盗链的完整步骤

    Nginx配置防盗链的完整步骤

    需求: 通常站点,都会想让自己网站的视频和图片,免被盗用,毕竟视频流量,花的都是白花花银子(土豪可以不用考虑)~~. 一.单刀直入,先上nginx配置文件 server { listen 80; server_name www.test.com; root /data/web/; index index.php index.html; access_log /data/logs/nginx/biao.madacode.access.log main; location /{ root /home

  • 把jquery 的dialog和ztree结合实现步骤

    第一步:先准备好juqury-ui.ztree 的js文件和css 文件 第二步:example.jsp文件代码中写 复制代码 代码如下: ..引入jqueryui.ztree 的js和css文件 <body> <button value="点击弹出树的dialog对话框" onclick ="getTree()"/> <div id="ztree" class="ztree"/> <

  • jQuery对象的链式操作用法分析

    本文实例讲述了jQuery对象的链式操作用法.分享给大家供大家参考,具体如下: jQuery对象的链式操作 首先来看一个例子: 复制代码 代码如下: $("#myphoto").css("border","solid 2px#FF0000").attr("alt"," good"); 对一个jQuery对象先调用了css()函数修改样式,然后使用attr()函数修改属性,这种调用方式象链一样,所以称为&qu

随机推荐