Javascript 如何使用spin.js显示页面加载指示器

我正在学习如何使用，以便在加载网页时可以显示加载指示器（微调器）

我让它工作了，但我不确定是否在正确的页面生命周期中调用了旋转/停止。是否可以在

$（窗口）之前显示微调器。准备好了吗

<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();
};


变量微调器；
$（窗口）.ready（函数加载动画（）{
变量选项={
lines:13，//要绘制的行数
长度：7，//每行的长度
宽度：4，//线条粗细
半径：10，//内圈的半径
拐角：1，//拐角圆度（0..1）
旋转：0，//旋转偏移量
颜色：'#000'、//#rgb或#rrggbb
速度：1，每秒//圈
轨迹：60，//余辉百分比
shadow:false，//是否渲染阴影
hwaccel:false，//是否使用硬件加速
className:'微调器'，//要分配给微调器的CSS类
zIndex:2e9，//z索引（默认为2000000000）
top:'自动'，//在px中相对于父对象的top位置
左：“自动”//在px中相对于父对象的左位置
};
var目标=$（“主体”）[0]；
旋转器=新旋转器（opts）。旋转（目标）；
});
window.onload=函数（）{
spinner.stop（）；
};


有关工作示例，请参见
我创建了一个对象来控制旋转：

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();
     }
};

$(document).ready(function(){
        // Once the DOM is loaded, start spinning
        spinner = Rats.UI.LoadAnimation.start();

        pageUI();

});

$(window).load(function(){
        // Once the page is fully loaded, stop spinning
        Rats.UI.LoadAnimation.stop(spinner);
});

加载DOM后，我开始旋转：

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();
     }
};

$(document).ready(function(){
        // Once the DOM is loaded, start spinning
        spinner = Rats.UI.LoadAnimation.start();

        pageUI();

});

$(window).load(function(){
        // Once the page is fully loaded, stop spinning
        Rats.UI.LoadAnimation.stop(spinner);
});

加载整个页面后，我停止旋转：

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();
     }
};

$(document).ready(function(){
        // Once the DOM is loaded, start spinning
        spinner = Rats.UI.LoadAnimation.start();

        pageUI();

});

$(window).load(function(){
        // Once the page is fully loaded, stop spinning
        Rats.UI.LoadAnimation.stop(spinner);
});

两者之间有什么区别

请参阅my github repo的完整代码：




你能告诉我如何获取Rats.js文件吗？我正在MVC中尝试做同样的事情，你能告诉我是否需要做其他事情来添加视图中的内容。你好，Shivam，你可以在这里@oneleggednule获取它-你有任何MVC解决方案吗，我正在MVC5上工作，并在同一个地方寻找解决方案。谢谢