Web 组件的事件“已加载所有内容并绘制到屏幕”

Question

我有一个 Web 组件，它基本上封装了我的应用程序。在它的影子 DOM 中还有更多的 Web 组件（以及标准的 HTML/CSS 内联 + 外部/脚本内联 + 外部），而这些 Web 组件又可能在它们的影子 DOM 中包含其他组件......等等。

我有一个加载叠加层，我希望在所有内容加载并绘制/样式等之前显示它...

我觉得应该有一些我可以参与的活动。我做了一些搜索，似乎表明没有，但考虑到它的发展，我认为事情可能已经改变了？如果没有活动 - 我怎么能自己写这个？

仅针对 Chrome 71

Answer 1

简单的答案是否定的。没有什么神奇的事件可以知道您的应用何时完成。

要完成这项工作，您必须提供事件。

您的代码需要知道它何时完成加载，然后调度一个可以操作的事件。

问题源于这样一个事实，除了开发人员您之外，没有人知道您的代码是否完成。您将不得不等待每个部分完成加载，然后，当您知道一切都已完成时，您仍然希望给浏览器时间来渲染所有内容。因此，只有在这次给浏览器之后，您才会调度您的事件。

你可以这样做：

class MyAppClass extends HtmlElement {
  // The rest of your class is defined by you
  
  codeAllFinished() {
    setTimeout(() => {
      this.dispatchEvent(new CustomEvent('all-finished));
    },0);
  }
}

只有在您知道您的代码已完成收集数据并创建 DOM 元素之后，您才能调用函数 codeAllFinished。

超时将允许浏览器有时间呈现内容，然后您将发送您的事件以让任何人知道您已完成。