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