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

Question

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

Answer 1

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

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

在 HTML 导入中，阅读此内容以了解和之间onload的区别： http ://webcomponents.org/polyfills/html-imports/HTMLImportsLoadedWebComponentsReady

Answer 2

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

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

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

有关进口的更多信息，请点击此处。