2010-07-17 88 views
1

我想知道如何使用JavaScript代替src属性(或删除整个img-node),如果浏览器正在实现,image-src-property之外的图像不存在(不再存在) 。如何在HTML文档中用JavaScript代替破碎的图像?

例如:

<div id="foo"> 
    <img src="bar"> 
</div> 

和IMG标签指向无处。在某些浏览器中,尤指iE正在展示一个“无图像”的十字架。我更喜欢用替代图片网址代替bar,或者用img-node替代img-node。

我发现一个approach,这并不真正为我工作。

请仅使用PrototypeJS或原始JS(它是使用PrototypeJS的项目,我不想用其他框架重载它)来建议我的解决方案。

+0

“我发现了一种方法,这对我来说并没有什么效果。” - 为什么? – 2010-07-17 00:33:06

+0

链接解决方案的哪些部分不适合您?看起来像一个很好的解决方案。 – 2010-07-17 00:39:06

+0

我真的不知道。老实说,我复制并粘贴它,并没有任何影响。 - 但无论如何,如果有更多的事件处理程序像onerror,这很有趣。如果不是:可能充当处理程序的变通办法。 – ChrisBenyamin 2010-07-17 00:41:52

回答

1

只需使用一个onerror处理程序,图像,以及处理程序中,可以删除节点或更改源:

<img src="..." id="img-1" 
    onerror="document.getElementById('img-1').src='working image';"> 

或者交替:

<img src="..." id="img-1" 
    onerror="document.getElementById('img-1').parentNode.removeChild(document.getElementById('img-1'));"> 

它可能会更好编写作为事件处理程序并将其附加到文档中的所有图像。

+0

我试过第一个解决方案,它工作正常。 但是如果您的文档中包含dynamic-many img,那么ID如何?你不能使用_this_或其他东西吗? – ChrisBenyamin 2010-07-17 01:00:43

+0

如果你编写一个事件处理程序,并将其附加到图像上,那么你可以使用'this'。在内联脚本中,'this'将引用'window'对象。 – bluesmoon 2010-07-17 01:09:37

+0

onerror属性不是严格的xhtml,所以我不得不为此答案投票。 – ChrisBenyamin 2010-07-24 19:58:13