页面加载后等待元素加载

Question

I have a function that loads a SVG Dom from a file. Currently, it creates an embed element and places it in the document, then waits for it to load with an onload event. Apparently, however, onload isn't called for elements placed in the document after the page has loaded. Is there a way that I can register a function to be called after the element has finished loading?

This is what I have:

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

I figured out the problem, I was loading the SVG document in a div tag that was hidden with style="display:none" . For some reason, the browser didn't load the embed when it was in this tag. When I removed the style attribute, the onload event fired the way I expected it to.

Answer 2

Relevant: How to check if an embedded SVG document is loaded in an html page?

If you have control over the SVG document, could you not add a script in it that calls a function in the browser window?

Or, as the answer to that question suggested, polling to see if the SVG document has finished loading.