我们在做网站的时候如果引用了网站外部的图片,我们将无法避免它会出错,有时图片被删除了,有时被引用的站点不稳定都会对我们造成影响,这时我们需要提供一个替补的图片。外部的图片是否失效是很难判断的,最初想的是使用ajax向图片发送一个请求,如果返回404就证明图片失效,那么就换成替补的图片。但是这样做事相当复杂的,而且还牵扯到js跨域的问题。
后来发现其实 img有个onerror的事件,就是加载的时候如果图片出错就会触发这个事件,那么我们可以这样写onerror="javascript:this.src='http://www.iscss.tk/images/bg.gif'",在图片失效的时候就替换成备用的图片。
完整代码:
<img src="logo.jpg" width="60" height="45" onerror="javascript:this.src='http://www.iscss.tk/images/bg.gif'" />