在已经加载的元素上添加addEventListener('load'， func)

Adding addEventListener('load', func) on an already loaded element

本文关键字：load func addEventListener 加载 元素 添加      更新时间：2023-09-26

我需要检查是否加载了OBJECT标签，在某些边缘情况下，在JavaScript运行之前加载了OBJECT，然后我的函数将永远不会触发。

<object type="image/svg+xml" data="svg/europas-ledande-online-butik.svg">Europas ledande online butik</object>
obj.addEventListener('load', function svgLoad() {..

我如何检查我的对象是否已经加载?我可以做: object onload="store some global variable"，然后再检查，但那又笨拙又难看。

我不能检查宽度或高度，因为我不知道值(它是通过CMS添加的)

想法?

上面的例子恰好是一个SVG，但它可以是任何带有额外外部数据请求的元素——对象、图像、嵌入等等。

如上所述:ONLOAD不是我想做的事情(关注点分离-内联事件处理程序对你不利)，addEventListener不能在已经加载的元素上工作。

当然，我希望尽快触发我的svgLoad-function -只要对象准备好显示

我最后是这样做的:

<object class="slide visuallyhidden" onload="this.setAttribute('data-is-loaded', 'true')" type="image/svg+xml" data="svg/europas-ledande-online-butik.svg">Europas ledande online butik</object>

. 

onload="this.setAttribute('data-is-loaded', 'true')"

是的，它是一个内联事件处理程序-但在这种情况下，它不会在自己的元素之外做任何事情。这并不理想，但必须这样做。

我可以设置一个类，但我选择不这样做。这种方式更加语义化，而且setAttribute有很好的浏览器支持(至少从DOM Core 1开始就支持IE5了)，而且非常高效。

现在唯一的问题是，使用OBJECT元素嵌入的SVG的onload似乎不需要包含链接的背景。这意味着onload可能会在任何链接的背景下载之前被触发。

相关文章：