页面完全加载时在 Dart 中的回调答案

【问题标题】：Callback in Dart when the page is fully loaded页面完全加载时在 Dart 中的回调
【发布时间】：2015-04-25 01:01:11
【问题描述】：

您可能知道我完全爱上了 Dart 和 Polymer，我再次对这两种技术有疑问。

我的应用程序是一个用 Dart 编写的相当复杂的聚合物应用程序。存在某种“页面”，而一旦用户执行操作，就会显示一个页面。页面包含各种类型的内容，项目数量可以从零到几百个。

为了增强用户体验，我构建了一个加载器，您可以在其中注册元素，一旦加载了所有注册的元素，页面就会显示出来。这很有效，而且感觉非常棒，但是要确保对可能发生的所有不同状态做出反应，这很复杂，总的来说，我对加载器的东西不太满意。

因此我想问一下 Dart 或 Polymer 中是否有任何东西可以帮助我显示加载指示器，只要不是所有内容都已完全加载，并且一旦完成，它就会隐藏加载器？

【问题讨论】：

【解决方案1】：

使用仅 HTML/CSS 加载指示器并设置样式，以便在从正文中删除 unresolved 属性时将其隐藏。见https://www.polymer-project.org/0.5/articles/styling-elements.html#preventing-fouc

【讨论】：

我一直认为，unresolved 只能用于初始页面加载...所以，只是为了确保我没听错。当用户点击导致某些内容更改的按钮时，我将 unresolved 添加到这些新数据的最顶部元素，例如到一个名为page 的元素，一旦加载所有内容，未解决的将被自动删除？正在进行的 ajax 请求会导致加载额外的数据吗？我真的很想了解未解决的机制，但我就是看不到，这是有效的。
老实说，我没有很好地理解你的问题，我只是做了一个疯狂的猜测。 unresolved 似乎不适合您的问题。 Unresolved 只是表示 Polymer 已经完成了所有组件的初始化。没有通用的方法可以知道何时完成。你可以做的是创建一个加载指示器组件来监听事件。当你开始一个长时间运行的操作时，你会触发一个事件来指示加载指示器显示自己，当你的 ajax 调用完成时，你会触发另一个事件来指示加载指示器应该自行移除。
我基本上就是这样做的，但是不止一个 ajax 请求。我收到了多个请求，大量的大图像，复杂的 SVG 可能需要一段时间来构建 HTML 代码等等。因此，检测一切何时完成是一项相当多的工作，这就是我寻找更清洁解决方案的原因。
好吧，我想我开始明白了。详细说明这种方法。您可以在加载指示器中使用队列，只需添加您为您发出的请求获得的所有期货，只要队列中有未完成的期货，加载指示器就会保持可见。当所有期货都完成后，它会隐藏/移除自己。
虽然我没有使用unresolved 标签，但我接受了这个答案，因为使用 Futures 的想法很棒。我正在使用Future.doWhile、Future.wait 和Completer 的组合来同步所有内容。无论是 ajax 请求、DOM 更新还是加载图像。这是超级简单且非常干净的方式。