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

标签 javascript css font-awesome openlayers-3

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

    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 吗？

我认为目前我只需要一个图标( map 标记)。也许我可以只加载这个以使其更快？ (我想即使那样也不能保证在 JS 运行之前拥有 css)

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

最佳答案

这可能有点脏，但也许您想像 http://allthingssmitty.com/2016/09/12/checking-if-font-awesome-loaded/ 中描述的那样执行检查. 一旦它返回 true，您就可以初始化您的 map 。

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

关于javascript - 在 openlayers 标记中使用图标时如何等待 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48208570/