4

So I am loading a load screen in my app. Then I load my custom elements through HTML imports by making a link element in JavaScript. I need to know when this HTML import has finished loading to display content to the user. Do HTML imports fire an event when the download finishes?

Supersharp
  • 29,002
  • 9
  • 92
  • 134
Akheel K M
  • 170
  • 1
  • 2
  • 10

3 Answers3

3

When the HTML import has finished loading, it fires an event called HTMLImportsLoaded. I'd recommend you to rely on this event to get a consistant behavior across the different browsers.

window.addEventListener( "HTMLImportsLoaded", function ()
{
    //HTML Imports are loaded
} )

On HTML Imports, read this to understand the difference between onload, HTMLImportsLoaded and WebComponentsReady : http://webcomponents.org/polyfills/html-imports/

Supersharp
  • 29,002
  • 9
  • 92
  • 134
2

You have onload event. 

<script async>
  function handleLoad(e) {
    console.log('Loaded import: ' + e.target.href);
  }
  function handleError(e) {
    console.log('Error loading import: ' + e.target.href);
  }
</script>

<link rel="import" href="file.html"
      onload="handleLoad(event)" onerror="handleError(event)">

For more on imports, here you go.

2

If you need to know when all imports are loaded you can use:

window.addEventListener('WebComponentsReady', function() {
    // imports are loaded and elements have been registered
  });
Ioan Tomulesei
  • 86
  • 2
  • Will it work fine if I create a new element and appen to after the event has been fired once already?I intend to load a element and then load all elements after that using javascript. – Akheel K M Oct 02 '15 at 05:56
  • 1
    In this situation probably is more suitable to use "onload="handleLoad(event)" for import and here to load rest of your components. 'WebComponentsReady' event possible to work also if you only import loadscreen element and in 'WebComponentsReady' handler load rest of your components.I suggest to place all imports (except import for loadscreen) in a single html and load that html after is imported. – Ioan Tomulesei Oct 02 '15 at 06:17