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

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