正在预加载引导程序图示符

Preloading bootstrap glyphicons

本文关键字：引导程序 加载      更新时间：2023-09-26

有没有办法预加载引导程序的字形图标？

我有一个"下一步"按钮，按下时会显示一个旋转的"重新加载"字形图标。

（正常状态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>');
    }
}

但是加载需要245ms，在此之前，根本没有显示任何内容。

（它旨在显示"加载"状态，以防重定向花费更长时间）。但现在，按钮变成空白（对于不超过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;
}
相关文章：