快捷導(dǎo)航

如何使用jQuery來(lái)處理圖片壞鏈具體實(shí)現(xiàn)步驟

更新時(shí)間：2013年05月02日 15:53:40 作者：

也就是說(shuō)如果這個(gè)圖片沒(méi)有加載成功了會(huì)怎么辦，下面為大大家分享下如何處理裂圖，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助

今天我為大家講解一個(gè)頁(yè)面開(kāi)發(fā)過(guò)程中的一個(gè)小技巧：如何處理裂圖
也就是說(shuō)如果這個(gè)圖片沒(méi)有加載成功了會(huì)怎么辦？
第一步：HTML頁(yè)面里：

 
<!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è)頁(yè)面大家會(huì)看到一個(gè)壞掉的圖。
第二部：是一個(gè)JavaScript，它的功能是：如果圖片壞掉了，就彈出一個(gè)出錯(cuò)提示：

復(fù)制代碼代碼如下:

 
$(function(){ 
$('img').error(function(){ 
alert('error'); 
}); 
}); 

運(yùn)行一下，大家看到了嗎？
第三部：接下來(lái)，我們想要提高界面的友好效果，我們可以調(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)沒(méi)？這樣就可以實(shí)現(xiàn)對(duì)裂圖的處理了。
補(bǔ)充幾句：其實(shí)error在jquery1.8以前是提倡使用的，1.9之后不太提倡了，但是仍然可以使用，個(gè)人覺(jué)得還挺方便的。
大家也可以換用下面這個(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！