GWT Bootstrap3 按钮图标显示得很晚（滞后）答案

【问题标题】：GWT Bootstrap3 Button icons show up very late (lag)GWT Bootstrap3 按钮图标显示得很晚（滞后）
【发布时间】：2015-06-08 03:44:14
【问题描述】：

在我上传到截屏视频的视频中，您可以看到我的 GWT Bootstrap3（参见 https://gwtbootstrap3.github.io/gwtbootstrap3-demo/）项目的重新加载。我显示的页面几乎是空的（因此没有其他需要显示的图标）。当我在 chrome 浏览器上按 F5 键时，视频开始播放。您会注意到屏幕重新加载，然后按钮显示为空白方块，然后用图标填充 oiut。 http://www.screencast.com/t/dd7B9lr6

我怎样才能让他们立即用他们的图标显示出来

按钮作为 ButtonGroups 中的 ButtonToolbar 放置在垂直面板中

[...]

<g:VerticalPanel addStyleNames="{styles.tables.listBeanTable} ub-AbstractSummaryWidget">                                        

        <b:ButtonToolBar addStyleNames="{styles.summary.menuBar} hiddenPrint">
            <b:ButtonGroup >

                <b:Tooltip title="{msgs.refresh}" container="body">
                    <b:Button ui:field="refreshButton" icon="REFRESH"/>
                </b:Tooltip>
                <b:Tooltip title="Delete meeting" container="body">
                    <ui:attribute name="title" description="Label for button: delete meeting"/>
                    <b:Button ui:field="deleteMeetingButton" visible="false" icon="REMOVE"/>                    
                </b:Tooltip>

[...]

我不确定是否准确地绘制了图标来替换方块。是调用“initWidget(uiBinder.createAndBindUi(this));”在小部件的构造函数类中？

如果您要说：嘿，买一台功能更强大的笔记本电脑，那么它的显示速度会更快。 gwtbootstrap3 示例（例如 https://gwtbootstrap3.github.io/gwtbootstrap3-demo/#icons)）立即显示正确。

感谢您的帮助汉内斯

【问题讨论】：

我看到了您发布的视频您正在 gwt 代码 svr 中运行应用程序，这就是它的加载速度慢尝试使用生产模式
你是对的，它会减慢速度......但我的问题是它会等待加载图标图像直到显示它们......我认为它与代码 svr 无关

标签： button gwt icons lag gwtbootstrap3

【解决方案1】：

图标从Font Awesome 加载。它们只是 <i> 应用了适当的 CSS 样式的标签 - 这种样式强制 <i> 标签的内容成为所需的图标。我敢打赌，问题在于字体没有“足够快”地加载。也许它没有缓存？也许它是从较慢的服务器加载的？检查浏览器的开发人员工具，了解字体从哪里加载以及需要多长时间。它应该从相对于您的 webapp 的文件夹中加载，除非您使用 GwtBootstrap3CDN.gwt.xml 模块。

【讨论】：

感谢您的反馈。我在 Chrome 中检查了字体的来源，发现它来自本地（！）tomcat。引用的 css() 显示：@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.3.0');src:url('. ./fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') 格式('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.3.0')。还有其他想法吗？
它在 html 中被引用：127.0.0.1:8080/meetingApp/css/font-awesome-4.3.0.min.cache.css">
嗯，这是正确的行为。您可以通过在主机页面的<head> 中放置适当的标签来尝试更早地手动加载字体（可能在所有其他 CSS 和 JS 之前）。

【解决方案2】：

真正解决问题的是对 gwt 2.7 的更改。所有性能问题都消失了。此外，在上面的案例中，它有助于在 ui.xml 中设置 ButtonToolBar 不可见 (setVisible("false"))。并在 Ctor 的末尾使其可见 "setVisible("true).

【讨论】：