预加载 bootstrap 个字形

Question

有没有办法预加载 bootstrap 的字形？

我有一个 "Next"-按钮，按下时会显示一个旋转的 "reload" 字形。

（正常状态文本 = "Next"，按下时更改为加载微调器）

$('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 毫秒，在此之前，根本没有任何显示。

（它旨在显示 "loading" 状态，以防重定向花费更长的时间）。但现在，按钮变成空白（对于不超过 2xx 毫秒的正常重定向）

这不是有史以来最大的交易，但它并不漂亮

我该如何解决这个问题？

Answer 1

将所需的字形 class 添加到 html 标签并加载 html 和 "visibility:hidden" css.This 将加载 image.Once图片加载后会被浏览器缓存，所以当你在其他地方使用它时，显示图片不会花费太多时间。

例如：

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

或

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

预加载 bootstrap 个字形

Preloading bootstrap glyphicons

javascript

jquery

twitter-bootstrap

glyphicons