在openlayers标记中使用图标时如何等待css答案

【问题标题】：how to wait for css when using icons in openlayers markers在openlayers标记中使用图标时如何等待css
【发布时间】：2018-01-11 13:47:28
【问题描述】：

在 openlayers (v4.6.4) 中，当我使用 font-awesome 作为标记图标时，它们在第一次加载时不会显示（空缓存和硬重新加载）。我看到的只是一个矩形，就像一个破碎的角色。在第二次加载时，它们看起来很完美。

    var mapMarkerIcon = new ol.style.Style({
        text: new ol.style.Text({
            text: '\uf041 ', // <-- fa marker unicode
            font: 'Normal ' + 24 + 'px ' + 'FontAwesome',
            textBaseline: 'bottom',
            fill: new ol.style.Fill({
                color: green,
            })
        })
    });

我猜这是因为 openlayers 在 font-awesome css 有机会加载之前绘制了 unicode 图标代码。在第二次刷新时，页面缓存了 css，这就是它起作用的原因。

我不能要求我的所有用户刷新一次。有人知道如何解决这个问题吗？

我可以强制 JS 等待 css 吗？

我想我现在只需要一个图标（地图标记）。也许我可以加载这个以使其更快？（我想即使这样也不能保证在 JS 运行之前有 css）

我可以添加一点 javascript 在几毫秒后重绘图标吗？

【问题讨论】：

嘿尝试使用Window: load event 函数。这可能会对您有所帮助。

标签： javascript css font-awesome openlayers-3

【解决方案1】：

这可能有点脏，但也许您想实现http://allthingssmitty.com/2016/09/12/checking-if-font-awesome-loaded/ 中描述的检查。一旦返回 true，您就初始化您的地图。

附：您使用图标字体是否有特定原因？为什么不使用 SVG 图标？

【讨论】：

我会尝试切换到 SVG，似乎是一个更好的解决方案。

【解决方案2】：

您也许可以使用 setTimeout 重绘地图而侥幸

setTimeout(function(){ map.render(); }, 1000);

虽然最好使用在绘制之前等待所有内容加载的东西。如果您可以在此处使用 jQuery，请参阅此处的最佳答案Is it possible to wait until all javascript files are loaded before executing javascript code?

【讨论】：

我刚刚尝试过，还重绘了vectorLayer，但它不起作用。不过感谢您的想法，它本来可以工作的。