0

我试图加载 HTML 页面，它有它自己的数据和 ajax 调用来渲染视图html-import，但问题是当导入发生时视图尚未完成渲染，有没有办法知道视图何时完成调用和渲染其所有元素

(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>

4

1 回答 1

0

我建议您使用该onload事件，因为它会在所有内容完成加载后触发。

onload 事件在对象已加载时发生。

onload 最常用于元素内，用于在网页完全加载所有内容（包括图像、脚本文件、CSS 文件等）后执行脚本。

于 2017-09-27T16:51:57.967 回答