Cindy今天给大家带来的是页面开发过程中的一个小技巧：如何处理裂图。如果这个图片没有加载成功了会怎么办？
第一步：HTML页面里：
1 2 3 4 5 6 7 8 9 10 11 12 | <!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，它的功能是：如果图片坏掉了，就弹出一个出错提示：
1 2 3 4 5 | $(function(){ $('img').error(function(){ alert('error'); }); }); |
大家可以自己运行一下看看。
第三部：如果想要提高界面的友好效果，我们可以调用attr用一张默认图片替换掉这张裂图：
1 2 3 4 5 6 | $(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，后面加一个参数）
1 2 3 4 5 6 | $(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 才可以看到效果。如果大家想深入了解error的处理，请参考：http://api.jquery.com/error/
在线调试：http://www.gbtags.com/gb/debug/e2415d7e-10ee-4b7b-b41d-b503324f72fa.htm
关于Emmet快捷方式，大家可以查看：分享7个超实用的Emmet（zen coding）HTML代码使用技巧
如果你也有自己的原创开发或者设计作品，并希望在“极客标签”社区中与大家分享代码开发或者设计经验的话，请与给我们联系吧!
来源：极客技术专题【002期】：开发小技巧 – 如何使用jQuery来处理图片坏链？
这是一篇转载文章，来自 gbin1
http://www.gbin1.com/tutorials/knowledge-sharing/20130412-knowledge-sharing-no2/