预加载自举图形

有预加载自举图形的方法吗？预加载自举图形

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

（正常状态文本=“下一步”，当按压以加载旋转器的变化）

$('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毫秒正常重定向）

它不是最大的一笔交易不断，但它不是漂亮

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

来源

2016-01-05 user3787706

而不是从JS加上'span'，在HTML，但隐藏直接添加。然后从JS中取消隐藏它。你可以添加一个隐藏类，然后删除它。 –

听起来合理 – user3787706

为什么你认为glyphicons尚未加载？你看到网络调试器中显示加载时间的任何内容吗？ – Brewal

将所需的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; 
}

来源

2016-01-05 16:25:59

没有这样的事情：display：隐藏“在CSS中。要么使用“不透明度：0.01”或“可见度：隐藏”。 – Pierre

我意外地输入了它。我纠正了它。感谢@pierre让我知道。 –

预加载自举图形

回答

相关问题