有些時候,并不是圖片會加載不出來,在圖片展示的地方會出現(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事件來先添加個默認圖占位置~