HTML 导入完成加载时是否会触发事件？

Question

所以我正在我的应用程序中加载加载屏幕。然后，我通过在 JavaScript 中制作 link 元素，通过 HTML 导入加载我的自定义元素。我需要知道此 HTML 导入何时完成加载以向用户显示内容。下载完成后 HTML 导入会触发事件吗？

Answer 1

您有 onload 个活动。

<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)">

有关导入的更多信息，here you go。

Answer 2

如果您需要知道何时加载所有导入，您可以使用：

window.addEventListener('WebComponentsReady', function() {
    // imports are loaded and elements have been registered
  });

Answer 3

当 HTML 导入完成加载时，它会触发一个名为 HTMLImportsLoaded 的事件。我建议您依靠此事件在不同的浏览器中获得一致的行为。

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

关于 HTML 导入，阅读此内容以了解 onload、HTMLImportsLoaded 和 WebComponentsReady 之间的区别： http://webcomponents.org/polyfills/html-imports/

HTML 导入完成加载时是否会触发事件？

Is an event fired when an HTML import finishes loading?

html

javascript

polymer

custom-element

html-imports