如何使用jQuery來處理圖片壞鏈具體實現(xiàn)步驟
更新時間：2013年05月02日 15:53:40 作者：
也就是說如果這個圖片沒有加載成功了會怎么辦，下面為大大家分享下如何處理裂圖，感興趣的朋友可以參考下哈，希望對你有所幫助
今天我為大家講解一個頁面開發(fā)過程中的一個小技巧：如何處理裂圖
也就是說如果這個圖片沒有加載成功了會怎么辦？
第一步：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');
});
});
運行一下，大家看到了嗎？
第三部：接下來，我們想要提高界面的友好效果，我們可以調(diào)用attr用一張默認圖片替換掉這張裂圖：
復制代碼 代碼如下:
$(function(){
$('img').error(function(){
//alert('error');
$(this).attr('src','http://www.gbtags.com/gb/networks/themes/img/logohover.png');
});
});
大家看到極客標簽的logo圖標沒？這樣就可以實現(xiàn)對裂圖的處理了。
補充幾句：其實error在jquery1.8以前是提倡使用的，1.9之后不太提倡了，但是仍然可以使用，個人覺得還挺方便的。
大家也可以換用下面這個方法：（error換成了on，后面加一個參數(shù)）
復制代碼 代碼如下:
$(function(){
$('img').on('error',function(){
alert('error');
$(this).attr('src','http://www.gbtags.com/gb/networks/themes/img/logohover.png');
});
});
其實前一個error方法，是on方法的快捷方式
對了，如果你在本地測試error這個方法的話，需要啟動服務(wù)器，因為error方法需要檢查資源是否可用。比如這個test.html，需要在啟動服務(wù)器后，在瀏覽器中輸入http://localhost:8080/test.html 才可以看到效果。
希望能對大家有幫助，3Q！
相關(guān)文章
這篇文章的內(nèi)容是表單驗證插件Validation應用的實例講解，需要的朋友可以參考下2015-10-10
本文著重介紹：JavaScript訪問DOM對象方法/JQuery訪問DOM對象方法,通過JQuery庫中的方法訪問或控制頁面中的元素，比使用JavaScript代碼要簡潔得多，而且兼容各瀏覽器，感興趣的朋友可以了解下2013-01-01
jQuery配合coin-slider插件制作幻燈片效果的流程解析
coin-slider是GitHub上的一個人氣JavaScript開源插件,用它來實現(xiàn)幻燈片效果只需要動手寫很少的代碼,下面我們就來看一下jQuery配合coin-slider插件制作幻燈片效果的流程解析.2016-05-05
使用jQuery.load方法加載一個網(wǎng)頁，那么這個網(wǎng)頁內(nèi)部的js代碼是否能夠執(zhí)行呢，答案是肯定的，這就相當于把load的內(nèi)容與主頁面進行了合并一樣2011-03-03
這篇文章主要介紹了解決jquery版本沖突的有效方法,對于web設(shè)計的兼容性調(diào)試很有借鑒價值,需要的朋友可以參考下2014-09-09
jQuery+vue.js實現(xiàn)的多選下拉列表功能示例
這篇文章主要介紹了jQuery+vue.js實現(xiàn)的多選下拉列表功能,涉及jQuery+vue.js數(shù)據(jù)綁定及事件響應相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
如果你想你的博客頁面某些部分引起讀者的注意，你可以使這些部分震動，如廣告等等，今天這篇文章將介紹怎樣使你的頁面中的元素震動起來,感興趣的你可不要錯過了哦，或許對你學習jquery ui 有所幫助2013-02-02
jquery getScript動態(tài)加載JS方法改進詳解
有許多朋友需要使用getScript方法動態(tài)加載JS,本文將詳細介紹此功能的實現(xiàn)方法2012-11-11
這篇文章主要介紹了jQuery使用$.ajax提交表單的方法,以完整實例形式分析了jQuery基于ajax數(shù)據(jù)提交的具體步驟與數(shù)據(jù)處理技巧,非常簡單實用,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了href下載文件的實現(xiàn)，主要是根據(jù)id取url并下載,需要的朋友可以參考下2014-05-05