页面加载后等待元素加载

Question

我有一个从文件加载 SVG Dom 的函数。目前，它创建一个embed 元素并将其放置在文档中，然后等待它加载onload 事件。然而，显然，在页面加载后，不会为放置在文档中的元素调用 onload。有没有一种方法可以注册一个在元素完成加载后调用的函数？

这就是我所拥有的：

function loadSVG(svgFilename, callback)
{
  // Loads data from an svg file
  // loadSVG(
  //           svgFilename, // The path to the file to load
  //           callback     // The function to be called with the
  //                        // SVG document once it loads.
  //        );            
  var embed = document.createElement("embed");
  embed.src = svgFilename;
  embed.onload = function() // Doesn't get called because page has already loaded
  {
    var doc = embed.getSVGDocument();
    document.getElementById("SVGLoader").removeChild(embed);
    callback(doc);
  };
  document.getElementById("SVGLoader").appendChild(embed);
}

Answer 1

我发现了问题所在，我正在将 SVG 文档加载到 div 标记中，该标记被 style="display:none" 隐藏。出于某种原因，当embed 在这个标签中时，浏览器没有加载它。当我删除 style 属性时，onload 事件按我预期的方式触发。

Answer 2

相关：How to check if an embedded SVG document is loaded in an html page?

如果您可以控制 SVG 文档，您能否在其中添加一个脚本来调用浏览器窗口中的函数？

或者，正如该问题的答案所建议的，轮询以查看 SVG 文档是否已完成加载。