如何使用spin.js顯示頁面加載指示器

Question

我正在學習如何使用Spin.js，以便在加載網頁時顯示加載指示器（微調器）。

我得到它的工作，但我不知道我是否在正確的頁面生命週期中調用spin/stop。是否可以在$(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