JS對img標簽進行優(yōu)化使用onerror顯示默認圖像
更新時間：2014年04月24日 16:13:28 作者：
這篇文章主要介紹了JS對img標簽進行優(yōu)化使用onerror顯示默認圖像,需要的朋友可以參考下
對于網(wǎng)站圖像的不顯示有很多原因，網(wǎng)絡(luò)問題，文件本身問題，文件ＵＲＬ問題等，而當圖像加載失敗時會觸發(fā)onerror這個事件，我們利用這點，可以有效的避免圖像加載失敗的尷尬！
js代碼
//圖像加載出錯時的處理
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ù)制代碼 代碼如下:
//圖像加載出錯時的處理
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)語言，而是動態(tài)語言，這意味著變量可以引用或保存任何類型的值，此外，該類型可以隨時更改，這篇文章主要介紹了JavaScript?(!!)?中的雙感嘆號作用,需要的朋友可以參考下2022-09-09
JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進行驗證。通過本文給大家介紹Javascript的表單驗證長度，需要的朋友參考下吧2016-03-03
這篇文章主要為大家詳細介紹了解決js圖片加載時出現(xiàn)404問題的方法，具有一定的參考價值，這方面有困惑的朋友可以參考一下2015-11-11
JavaScript和jQuery獲取input框的絕對位置實現(xiàn)方法
下面小編就為大家?guī)硪黄狫avaScript和jQuery獲取input框的絕對位置實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
canvas實現(xiàn)圖片根據(jù)滑塊放大縮小效果
本文主要介紹了canvas實現(xiàn)圖片根據(jù)滑塊放大縮小效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了微信小程序冒泡事件及其阻止方法,結(jié)合實例形式分析了事件分類、冒泡及相應(yīng)阻止操作方法,需要的朋友可以參考下2018-12-12
JS簡單實現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法示例
這篇文章主要介紹了JS簡單實現(xiàn)查看文檔創(chuàng)建日期、修改日期和文檔大小的方法,結(jié)合實例形式分析了JavaScript使用fileCreatedDate屬性、fileModifiedDate屬性、lastModified屬性和fileSize屬性相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了如何給JS中的數(shù)組開頭添加元素，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了如何利用ES6進行Promise封裝總結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
javascript輕量級庫createjs使用Easel實現(xiàn)拖拽效果
這篇文章主要介紹了javascript輕量級庫createjs使用Easel實現(xiàn)拖拽效果的相關(guān)資料,需要的朋友可以參考下2016-02-02