预加载Bootstrap图标字体

Question

预加载Bootstrap图标字体

javascriptjquerytwitter-bootstrapglyphicons

3

有没有一种方法可以预加载Bootstrap的Glyphicons？

我有一个“下一步”按钮，当按下时会显示旋转的“重新加载”图标。

（正常状态文本=“下一步”，按下时更改为加载旋转器）

$('button#next').on('click', function nextProblem() {
    addSpinner.call($(this));
    redirectToNext();
});

function addSpinner() {
    if (!$(this).eq(0).hasClass("spinning")) {
        $(this).eq(0).html('<span class="glyphicon glyphicon-refresh spinning"></span>');
    }
}

但加载需要245毫秒，直到此时才会显示内容。

（这是为了在重定向时间较长时显示“加载”状态。但现在，对于不超过2xx毫秒的普通重定向，按钮只会变成空白）

虽然这不是最大的问题，但也不美观。

我该如何解决这个问题？

- user3787706

2

不要在JS中添加span，而是直接在HTML中隐藏它。然后从JS中取消隐藏它。您可以添加一个类hidden，并将其删除。 - azeós

你认为为什么字形图标还没有加载？在网络调试器中是否看到任何显示加载时间的内容？ - Brewal

是的，ChromeDevTools 显示每次大约需要 300 毫秒的 GET 请求到 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/fonts/glyphicons-halflings-regular.woff2。 - user3787706

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pradeep Potnuru · Accepted Answer

在html标签中添加所需的glyphicon类，并使用"visibility:hidden" css加载html。这将加载图像。一旦图像被加载，它将被浏览器缓存，因此当您在其他地方使用它时，不需要花费大量时间来显示图像。

例如：

  <span style="visibility:hidden" class="glyphicon glyphicon-refresh spinning"></span>

或者

<span class="glyphicon glyphicon-refresh spinning"></span>
**css:**
.spinning{
   visibility:hidden;
}