有些时候,并不是图片会加载不出来,在图片展示的地方会出现叉叉或者alt内容,像我这种差不多先生都看不下去了,更别说用户了,那么在图片在加载失败,在图片位置加一个默认图片是很必要的了(虽然不是想要的图片,但总比叉叉的感觉好吧。。)
这里我们用到了 onerror 事件,代码如下:
<img src="/img/i.png" onerror="this.src='/img/o.png'" />
那么,如果说onerror中的图片地址写错了,那么onerror事件就会不停执行,像个死循环一样,页面不停闪烁,有这篇文章 提出了解决办法,不过我采用了下方评论的办法:
<img src="/img/i.png" onerror="this.error=null;this.src='/img/o.png'" />
将error置空,只执行一次。
扩展
之前用到了onerror事件,当然也可以使用onload事件来实现啦~如果图片只是太大,加载时间太长,就可以用onload事件来先添加个默认图占位置~