Waiting for element load after page has loaded
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);开发者_Python百科
callback(doc);
};
document.getElementById("SVGLoader").appendChild(embed);
}
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.
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.
精彩评论