预加载bootstrap glyphicons

Question

有没有办法预加载bootstrap的glyphicons？

我有一个"下一个" - 按钮,按下时显示旋转的"重新加载"字形.

(正常状态text ="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毫秒,直到那时,根本没有任何显示.

(它旨在显示重定向需要更长时间的"加载"状态).但是现在,按钮变为空白(对于不超过2xx毫秒的正常重定向)

这不是有史以来最大的交易,但它并不美丽

我怎样才能解决这个问题？

Answer 1

将所需的glyphicons类添加到html标记并使用"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;
}