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?

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?

• javascript
• html
• polymer
• custom-element
• html-imports

3 Answers 3

When the HTML import has finished loading, it fires an event called HTMLImportsLoaded. I'd remend 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://webponents/polyfills/html-imports/

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.

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
  });