首頁 > 開發者 > JavaScript
今天我為大家講解一個頁面開發過程中的一個小技巧：如何處理裂圖
也就是說如果這個圖片沒有載入成功了會怎麼辦？
第一步：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！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
