圖片加載錯誤時顯示默認圖片

有些時候,并不是圖片會加載不出來,在圖片展示的地方會出現(xiàn)叉叉或者alt內(nèi)容,像我這種差不多先生都看不下去了,更別說用戶了,那么在圖片在加載失敗,在圖片位置加一個默認圖片是很必要的了(雖然不是想要的圖片,但總比叉叉的感覺好吧。。)

這里我們用到了 onerror 事件,代碼如下:

<img src="/img/i.png" onerror="this.src='/img/o.png'" />

那么,如果說onerror中的圖片地址寫錯了,那么onerror事件就會不停執(zhí)行,像個死循環(huán)一樣,頁面不停閃爍,有這篇文章? 提出了解決辦法,不過我采用了下方評論的辦法:

<img src="/img/i.png" onerror="this.error=null;this.src='/img/o.png'" />

將error置空,只執(zhí)行一次。


擴展

之前用到了onerror事件,當然也可以使用onload事件來實現(xiàn)啦~如果圖片只是太大,加載時間太長,就可以用onload事件來先添加個默認圖占位置~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容