JS對img標(biāo)簽進(jìn)行優(yōu)化使用onerror顯示默認(rèn)圖像
更新時(shí)間：2014年04月24日 16:13:28 作者：
這篇文章主要介紹了JS對img標(biāo)簽進(jìn)行優(yōu)化使用onerror顯示默認(rèn)圖像,需要的朋友可以參考下
對于網(wǎng)站圖像的不顯示有很多原因，網(wǎng)絡(luò)問題，文件本身問題，文件ＵＲＬ問題等，而當(dāng)圖像加載失敗時(shí)會(huì)觸發(fā)onerror這個(gè)事件，我們利用這點(diǎn)，可以有效的避免圖像加載失敗的尷尬！
js代碼
//圖像加載出錯(cuò)時(shí)的處理
function errorImg(img) {
img.src = "http://static.xuexiba.com/uploadfile//UserInfo/Avatar/201403/1303992393385832875324.jpg";
img.onerror = null;
}
html代碼
<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />
頁面效果
js代碼
復(fù)制代碼 代碼如下:
//圖像加載出錯(cuò)時(shí)的處理
function errorImg(img) {
img.src = "http://static.xuexiba.com/uploadfile//UserInfo/Avatar/201403/1303992393385832875324.jpg";
img.onerror = null;
}
html代碼
復(fù)制代碼 代碼如下:
<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />
頁面效果
您可能感興趣的文章:
相關(guān)文章
WdatePicker.js時(shí)間日期插件的使用方法
本篇文章主要介紹了WdatePicker.js時(shí)間日期插件的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
ng-options和ng-checked在表單中的高級(jí)運(yùn)用(推薦)
AngularJS是當(dāng)前非常的流行的前端框架，它的語法糖非常多，也極大的方便了前端開發(fā)者。這篇文章主要介紹了ng-options和ng-checked在表單中的高級(jí)運(yùn)用,需要的朋友可以參考下2017-01-01
alert(3)就這么段程序，沒有寫在function中，想啊想，怎么終止js呢？jfslk也能達(dá)到一樣的效果(終止js程序)2013-05-05
主要用到了js的dom操作，用到了rows 集合。2009-12-12
OpenLayers3實(shí)現(xiàn)對地圖的基本操作
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)對地圖的基本操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
Array的push與unshift方法都能給當(dāng)前數(shù)組添加元素，不同的是，push是在末尾添加，而unshift則是在開頭添加。2011-03-03
這篇文章主要介紹了seajs和requirejs模塊化,結(jié)合具體案例形式分析了seaj和requirejs模塊化應(yīng)用的相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2019-08-08
Javascript原生的String處理函數(shù)顯得很不夠豐富2010-04-04
網(wǎng)站頁面自動(dòng)跳轉(zhuǎn)實(shí)現(xiàn)方法PHP、JSP（下）
很多時(shí)候我們需要Web頁具備有自動(dòng)跳轉(zhuǎn)功能，例如，論壇中的用戶登錄、發(fā)帖及回復(fù)或留言簿中的留言和回復(fù)等操作成功后，若用戶沒有任何鼠標(biāo)點(diǎn)擊操作，過了一定的時(shí)間，頁面自動(dòng)跳轉(zhuǎn)到預(yù)設(shè)的頁面。2010-08-08
本文主要介紹了webpack熱更新的原理及實(shí)現(xiàn),,無需完全刷新整個(gè)頁面的同時(shí),更新代碼變動(dòng)的模塊,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06