首頁 > web前端 > js教程 > 如何使用jQuery來處理圖片壞鏈具體實作步驟_jquery

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

WBOY
發布: 2016-05-16 17:34:50
原創
1272 人瀏覽過

今天我為大家講解一個頁面開發過程中的一個小技巧:如何處理裂圖
也就是說如果這個圖片沒有載入成功了會怎麼辦?
第一步:HTML頁面裡:

複製代碼 代碼如下:




gbin1




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



運行這個頁面大家會看到一個壞掉的圖。
第二部分:是一個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!
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板