使用背景的onerror事件:url()

时间:2014-03-09 20:07:39

标签: html css image background onerror

如果找不到源图像,有没有办法显示替代图像?我知道要通过以下方式完成此任务:

<img src="imagenotfound.gif" alt="Image not found" onError="this.src='imagefound.gif';" />

但是如果你做这样的事情怎么样,如果有错误或者找不到图像你怎么能抓住?

<div style="background:url('myimage.gif')"></div>

3 个答案:

答案 0 :(得分:82)

如果myimage.gif不透明,您可以使用多个背景:

background: url('myimage.gif'), url('fallback.gif');

这种方式fallback.gif仅在myimage.gif不可用时才会显示。

请注意,即使fallback.gif可用,也可以下载myimage.gif


或者,即使没有得到广泛支持,CSS Images 3也引入了the image() notation

background: image('myimage.gif', 'fallback.gif');
  

可以用逗号分隔多个<image-decl>s in   在哪种情况下,该函数代表第一个不是的图像   invalid image

答案 1 :(得分:3)

有了背景图片,没有事件;你自己检查一下。

Make an (XML)HTTP request,如果您收到an error status code的响应或根本没有响应(超时后),请使用其他图片资源。这种方法受Same-Origin Policy的限制。

答案 2 :(得分:2)

您还可以使用虚拟图像并从那里使用onerror事件...

IntPtr.Zero