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

【问题标题】：Is an event fired when an HTML import finishes loading?当 HTML 导入完成加载时是否会触发事件？
【发布时间】：2015-10-02 05:00:00
【问题描述】：

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

【问题讨论】：

标签： javascript html polymer custom-element html-imports

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

如果我创建一个新的元素并在事件已经触发一次后附加到会正常工作吗？我打算加载一个元素然后加载所有元素之后使用 javascript。
在这种情况下可能更适合使用 "onload="handleLoad(event)" 进行导入并在此处加载其余组件。如果您也可以使用“WebComponentsReady”事件仅导入 loadscreen 元素并在“WebComponentsReady”处理程序中加载其余组件。我建议将所有导入（loadscreen 导入除外）放在一个 html 中，并在导入后加载该 html。

【解决方案3】：

您有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。

【讨论】：