有没有办法预加载 bootstrap 的字形?
我有一个“下一步”按钮,按下时会显示一个旋转的“重新加载”字形图标。
(正常状态文本 =“下一步”,按下时更改为加载微调器)
$('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 毫秒的正常重定向)
这不是有史以来最大的交易,但它并不漂亮
我该如何解决这个问题?
最佳答案
将所需的 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;
}
关于javascript - 预加载 bootstrap 字形图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34616172/