Как показать индикатор загрузки страницы с помощью spin.js

Question

Я изучаю, как использовать Spin.js, чтобы индикатор загрузки (прядильщик) отображался во время загрузки веб-страницы.

Я получил его работу, но я не уверен, что я называю вращение/остановку в правильном жизненном цикле страницы. Можно ли показывать счетчик до $(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(); 
}; 

Для рабочего примера, см http://sgratrace.appspot.com/industry.html

Answer 1

Я создал объект для управления спиннингом:

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

Когда DOM загружен, я начинаю вращаться:

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

В чем разница между window.onload vs $(document).ready()

Посмотреть полный код на моем GitHub репо:

• https://github.com/seahrh/sgratrace/blob/master/war/js/rats.js
• https://github.com/seahrh/sgratrace/blob/master/war/index.html