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ò)問題,文件本身問題,文件URL問題等,而當(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)文章
詳解JavaScript?(!!)?中的雙感嘆號是干什么用的
JavaScript?不是靜態(tài)語言,而是動(dòng)態(tài)語言,這意味著變量可以引用或保存任何類型的值,此外,該類型可以隨時(shí)更改,這篇文章主要介紹了JavaScript?(!!)?中的雙感嘆號作用,需要的朋友可以參考下2022-09-09JavaScript和jQuery獲取input框的絕對位置實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫avaScript和jQuery獲取input框的絕對位置實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10canvas實(shí)現(xiàn)圖片根據(jù)滑塊放大縮小效果
本文主要介紹了canvas實(shí)現(xiàn)圖片根據(jù)滑塊放大縮小效果的實(shí)例,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02JS簡單實(shí)現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法示例
這篇文章主要介紹了JS簡單實(shí)現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法,結(jié)合實(shí)例形式分析了JavaScript使用fileCreatedDate屬性、fileModifiedDate屬性、lastModified屬性和fileSize屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04如何利用ES6進(jìn)行Promise封裝總結(jié)
這篇文章主要介紹了如何利用ES6進(jìn)行Promise封裝總結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02javascript輕量級庫createjs使用Easel實(shí)現(xiàn)拖拽效果
這篇文章主要介紹了javascript輕量級庫createjs使用Easel實(shí)現(xiàn)拖拽效果的相關(guān)資料,需要的朋友可以參考下2016-02-02