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 Imports上，阅读此内容以了解onload，HTMLImportsLoaded和WebComponentsReady之间的区别： http://webcomponents.org/polyfills/html-imports/

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

3 个答案: