javascript 如何使用 spin.js 显示页面加载指示器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15403492/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display page loading indicator using spin.js
提问by ruhong
I am learning how to use Spin.jsso that a loading indicator (the spinner) can be shown while the web page is loading.
我正在学习如何使用Spin.js，以便在加载网页时可以显示加载指示器（微调器）。
I got it working but I am not sure whether I am calling the spin/stop in the proper page lifecycle. Is it possible to show the spinner before $(window).ready?
我让它工作了，但我不确定我是否在正确的页面生命周期中调用旋转/停止。之前是否可以显示微调器$(window).ready？
<script type="text/javascript">
var spinner;
$(window).ready(function loadingAnimation() {
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = $("body")[0];
spinner = new Spinner(opts).spin(target);
});
window.onload = function() {
spinner.stop();
};
For the working example, please see http://sgratrace.appspot.com/industry.html
回答by ruhong
I created an object to control the spinning:
我创建了一个对象来控制旋转：
Rats.UI.LoadAnimation = {
"start" : function(){
var opts = {
lines : 13, // The number of lines to draw
length : 7, // The length of each line
width : 4, // The line thickness
radius : 10, // The radius of the inner circle
corners : 1, // Corner roundness (0..1)
rotate : 0, // The rotation offset
color : '#000', // #rgb or #rrggbb
speed : 1, // Rounds per second
trail : 60, // Afterglow percentage
shadow : false, // Whether to render a shadow
hwaccel : false, // Whether to use hardware acceleration
className : 'spinner', // The CSS class to assign to the spinner
zIndex : 2e9, // The z-index (defaults to 2000000000)
top : $(window).height()/2.5, // Manual positioning in viewport
left : "auto"
};
var target = $("body")[0];
return new Spinner(opts).spin(target);
},
"stop" : function(spinner){
spinner.stop();
}
};
When the DOM is loaded, I start spinning:
加载 DOM 后，我开始旋转：
$(document).ready(function(){
// Once the DOM is loaded, start spinning
spinner = Rats.UI.LoadAnimation.start();
pageUI();
});
When the entire page is loaded, I stop spinning:
加载整个页面后，我停止旋转：
$(window).load(function(){
// Once the page is fully loaded, stop spinning
Rats.UI.LoadAnimation.stop(spinner);
});
What's the difference between window.onload vs $(document).ready()
window.onload 与 $(document).ready() 有什么区别
See the full code on my github repo:
在我的 github repo 上查看完整代码：
