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

Question

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

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

如何检查我的 OBJECT 是否已加载？我可以这样做： object onload="store some global variable" 然后检查它。但那又笨又丑。

我无法检查宽度或高度，因为我不知道这些值（它是通过 CMS 添加的）

想法？

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

如上所述：ONLOAD 不是我想做的事情（关注点分离 - 内联事件处理程序对你不利）并且 addEventListener 不适用于已加载的元素。

当然，我希望尽快触发我的 svgLoad 函数 - 一旦对象准备好显示。

谢谢！

/J

Answer 1

这就是我最后做的事情：

<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')"

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

我可以设置 class，但我选择不这样做。这种方式更语义化，setAttribute 有很好的浏览器支持（一直回到 DOM Core 1 至少包括 IE5）并且非常有效。

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

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

JavaScript: adding addEventListener('load', func) on an already loaded element

javascript

javascript-events