spin.js가 작동하지 않는 것처럼 보입니다/

로딩 애니메이션을 표시하기 위해 spin.js 라이브러리를 사용하려고합니다. 그러나, 나가는 것은 spin.js developer example 나는 그것이 일하는 것처럼 보일 수 없다/나타납니다; 이것은 Firefox에서 HTML 파일을 열 때 빈 div 태그에 의해 명백합니다. 관심있는 (필요 JQuery와-1.9.0.min.js 및 스핀spin.js가 작동하지 않는 것처럼 보입니다/

<html> 
<head> 
    <script src="spin.min.js"> 
     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 = document.getElementById("spinner"); 
     var spinner = new Spinner(opts).spin(target); 
    </script> 
</head> 
<body> 
    <div id="spinner"> 
    </div> 
</body>

근무 코드 :

여기 내 코드 (spinnertest.html)입니다. 동일한 디렉토리의 min.js) :

<html> 
<head> 
    <script type="text/javascript" src="spin.min.js"></script> 
    <script type="text/javascript" src="jquery-1.9.0.min.js"></script> 
    <script type="text/javascript"> 
     $(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: 'auto', // Top position relative to parent in px 
       left: 'auto' // Left position relative to parent in px 
      }; 
      var target = document.getElementById("spinner"); 
      var spinner = new Spinner(opts).spin(target); 
     }); 
    </script> 
</head> 
<body> 
    <div id="spinner"> 
    </div> 
</body>

출처

2013-02-03 Akyidrian

나는 실행하는 src 속성과 script 태그 내부에 그 코드를 믿지 않는다. 코드를 다음과 같이 변경하면 작동합니까?

<script type="text/javascript" src="spin.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    var opts = ... 
    ... 
    // all the code that you currently have between <script> and 
    // </script> goes here 
    }); 
</script>

출처

2013-02-03 21:04:40 Emily

그 점에서 과 함께 JQuery 라이브러리를 포함하는 것도 도움이됩니다. 이제 효과가 있습니다. – Akyidrian

DOM 준비 상태로 초기화해야합니다. 그렇지 않으면 target은 null이됩니다. 또한 포함 스크립트가 별도의 script 태그에 있어야합니다. jQuery를 사용하여

...

$(function() { 
    var target = document.getElementById("spinner"); 
    var spinner = new Spinner(opts).spin(target); 
});

출처

2013-02-03 20:49:33

아, 그렇다면 도움이 될 것입니다. 하지만 여전히 작동하지 않는 것 같습니다. 그냥 빈 div 태그를 얻는 것뿐입니다. – Akyidrian

spin.js가 작동하지 않는 것처럼 보입니다/

답변

관련 문제