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

我发现了问题，我正在使用div隐藏的style="display:none"标记中加载SVG文档。出于某种原因，浏览器在此标记中未加载embed。当我删除了style属性时，onload事件以我预期的方式触发。

Answer 2

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

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

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

页面加载后等待元素加载

2 个答案: