如何使用jQuery來處理圖片壞鏈具體實現(xiàn)步驟
更新時間:2013年05月02日 15:53:40 作者:
也就是說如果這個圖片沒有加載成功了會怎么辦,下面為大大家分享下如何處理裂圖,感興趣的朋友可以參考下哈,希望對你有所幫助
今天我為大家講解一個頁面開發(fā)過程中的一個小技巧:如何處理裂圖
也就是說如果這個圖片沒有加載成功了會怎么辦?
第一步: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');
});
});
運行一下,大家看到了嗎?
第三部:接下來,我們想要提高界面的友好效果,我們可以調(diào)用attr用一張默認圖片替換掉這張裂圖:
復制代碼 代碼如下:
$(function(){
$('img').error(function(){
//alert('error');
$(this).attr('src','http://www.gbtags.com/gb/networks/themes/img/logohover.png');
});
});
大家看到極客標簽的logo圖標沒?這樣就可以實現(xiàn)對裂圖的處理了。
補充幾句:其實error在jquery1.8以前是提倡使用的,1.9之后不太提倡了,但是仍然可以使用,個人覺得還挺方便的。
大家也可以換用下面這個方法:(error換成了on,后面加一個參數(shù))
復制代碼 代碼如下:
$(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!
相關文章
輕松學習jQuery插件EasyUI EasyUI創(chuàng)建樹形網(wǎng)絡(1)
這篇文章主要幫助大家輕松學習jQuery插件EasyUI,并且教大家如何利用EasyUI創(chuàng)建樹形網(wǎng)絡,感興趣的小伙伴們可以參考一下2015-11-11基于jQuery和CSS3實現(xiàn)APPLE TV海報視差效果
這篇文章主要介紹了基于jQuery和CSS3實現(xiàn)APPLE TV海報視差效果,需要的朋友可以參考下2017-06-06jquery+正則實現(xiàn)統(tǒng)一的表單驗證
表單驗證一直很繁瑣,特別是大點的表單,如果每個input都去單獨寫驗證簡直要寫死人,最近寫了一小段js統(tǒng)一的驗證表單內(nèi)容是否正確。需要的朋友可以參考下2015-09-09js jquery分別實現(xiàn)動態(tài)的文件上傳操作按鈕的添加和刪除
本文為大家介紹下使用js及jquery實現(xiàn)動態(tài)的文件上傳操作按鈕的添加和刪除,具體示例如下,希望對大家有所幫助2014-01-01jquery實現(xiàn)tab菜單切換內(nèi)容(精簡版demo)
這篇文章主要為大家介紹了jquery實現(xiàn)tab菜單切換內(nèi)容的精簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10jQuery使用prepend()方法在元素前添加內(nèi)容用法實例
這篇文章主要介紹了jQuery使用prepend()方法在元素前添加內(nèi)容的方法,實例分析了prepend方法追加內(nèi)容的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03