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