JavaScript判断图片是否需要显示默认图片

显示一张图片,通过访问图片的地址,如果地址正确就显示地址正确的图片,如果不正确就显示默认的地址,说是通过JavaScript判断,实际只需要一个img标签就可以了

这里需要了解一下img标签中的onError ,onAbort,onALoad事件
onError:当图片加载出现错误,会触发 经常在这里事件里头写入 将图片导向默认报错图片,以免页面上出现红色的叉叉

onLoad:事件是当图片加载完成之后触发

onAbort:图片加载的时候,用户通过点击停止加载(浏览器上的红色叉叉)时出发,通常在这里触发一个提示:“图片正在加载”
例如:当一个图片显示失败之后需要连接另一个图片的时候可以这样写



把上面正确的地址改成错误的地址时就会加载百度的图片

例如,你可能会利用这个onAbort消息来警告用户,提醒他们停止某个重要图像的加载,例如图像映射:

同时有另一个问题出现:如果onerror="this.src='图片'",这个"图片"也不存在时,就会出现下边的错误:
img图片没找到onerror事件 Stack overflow at line: 0

IE下打开网页时,会弹出“Stack overflow at line: 0”的弹框。经分析,这个bug是由于img标签的onerror事件引起的。程序中用到的代码片段如下:正常情况下显示src所指路径的图片,加载失败时显示通过img标签的onerror事件显示另一张图片,问题就出现在了这里,当另一张图片也不存在时,就造成了循环触发onerror事件,在IE下就会弹出“stack overflow”的弹框。

解决的方法也很简单,在重新给img的src属性赋值时,先将onerror事件清除掉,再赋值,这样就不存在循环调用的问题了,代码段如下:


当时竟然做成在后台判断图片是否存在,这样考虑的就要有防火墙的问题了,所以能在客户端解决的就在客户端解决。尽量不要依赖在服务端

你可能感兴趣的:(JavaScript判断图片是否需要显示默认图片)