页面加载后等待元素加载

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);
}

- Na7coldwater

---

可能是重复的问题：除了在body标签中，你还能把JavaScript的onload事件放在哪里？ - Marcel Korpel

Answer 1

我发现了问题，原来我是在一个使用 style="display:none" 隐藏的 div 标签中加载SVG文档。由于某种原因，浏览器在这个标签中不会加载 embed 。当我移除了 style 属性后，onload 事件按照我的预期触发了。

- Na7coldwater

---

我可能会重新排列脚本，使得onload处理程序在设置“src”之前定义，以防加载立即发生。此外，您应该考虑切换到<object>而不是<embed>。 - Erik Dahlström

谢谢，Erik，我会考虑的。 - Na7coldwater

Answer 2

相关文章：如何检查嵌入的SVG文档是否已在HTML页面中加载？

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

或者，就像那个问题的答案所建议的那样，轮询以查看SVG文档是否已完成加载。

- Cristian Sanchez

---

谢谢，但我自己解决了：https://dev59.com/YlDTa4cB1Zd3GeqPJHPC#3705364 - Na7coldwater