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 在加载后立即修改，然后再绘制。

Answer 2

为创建的元素分配一个 id。

  function check_if_loaded() {
    var your_svg = document.getElementById("id").getSVGDocument();
    if (your_svg) {
        alert("loaded");

    } else {
        console.log("not yet loaded")
    }
}

your_element.addEventListener('load',check_if_loaded, false)