im trying to load HTML page it has it is own data and ajax calls to render a view using html-import, but the issue is when the import happens the view yet not finish rendering, is there is a way to know when the view is finished calling and rendering all its element
(function(){
function createLauncherPanel() {
var div = document.createElement("div");
div.setAttribute("class", "launcher-panel");
div.classList.add("hidden");
div.appendChild(createLauncherLink(div));
document.getElementsByTagName("body")[0].appendChild(div);
return div;
}
function createLauncherLink(container) {
var link = document.createElement("link");
link.setAttribute("rel", "import");
link.setAttribute("href", "path-to-htmlpage-with-data-load -asynchronously-with-json-feed-and-view-to-render");
console.log('container',container);
link.addEventListener('load', function(e) {
// all imports loaded
console.log(e);
console.log('link',link);
console.log(link.import);
// #ele is the element i need to get from the imported page - but sence this element is not rendered yet because of the lateinse of rendering and network calls , this will return null
container.appendChild(link.import.querySelector('#ele'));
});
return link;
}
createLauncherPanel();
})();<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.13/webcomponents-lite.js" type="text/javascript"></script>
</head>
<body>
<h1>Hello, worssld</h1>
<div id="ff"></div>
<script src="sc.js" type="text/javascript"></script>
</body>
</html>
I would suggest you to use the
onloadevent as it will fire when everything has finished loading.