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

Question

在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来重绘图标吗？

Answer 1

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

P.S。是否有使用图标字体的特定原因？为什么不使用SVG图标？

Answer 2

您可以使用setTimeout

重绘地图

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

虽然最好在绘图之前使用等待所有东西加载的东西。如果您可以在Is it possible to wait until all javascript files are loaded before executing javascript code?

使用jQuery，请参阅此处的最佳答案