如何使用jQuery來處理圖片壞鏈具體實現步驟

2019-11-20 22:45:25

字體：大中小

來源：轉載

供稿：網友

今天我為大家講解一個頁面開發過程中的一個小技巧：如何處理裂圖
也就是說如果這個圖片沒有加載成功了會怎么辦？
第一步：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！

上一篇：js通過地址欄給action傳值(中文亂碼全是問號)

下一篇：jQuery仿Excel表格編輯功能的實現代碼