javascript - 如何知道 元素的内容何时加载

Question

我正在以编程方式添加 <embed>标记到我的 HTML 文档:

var e = document.createElement('embed');
e.src = "some-image.svg";
e.type = "image/svg+xml";
document.body.appendChild(e);

这工作正常，并且 SVG 元素按预期显示。但是，我想用 JavaScript 操作 SVG 元素，并且尝试在将元素添加到 DOM 后立即这样做失败，因为内容尚未加载。

我该怎么做。请注意，我想不使用 jQuery 执行此操作，因此请不要指向 jQuery API。

Answer 1

作为@RGraham在评论中指出，<embed>元素引发 load内容准备就绪时的事件。

所以我的代码变成了:

var e = document.createElement('embed');
e.src = "img/z-slider.svg";
e.type = "image/svg+xml";
document.body.appendChild(e);

e.addEventListener('load', function()
{
    // Operate upon the SVG DOM here
    e.getSVGDocument().querySelector('#some-node').textContent = "New text!";
});

这比轮询要好，因为没有闪烁。 SVG 在加载后立即修改，然后再绘制。