로딩 스피너 gif 이미지가 고착됩니다.

Question

6kb 애니메이션 GIF 로딩 스피너가 있습니다. 브라우저 창에서 열면 잘 돌아갑니다. 하지만 내 웹 페이지에서 ajax 호출을 열면 멈추게됩니다. 그것은 정시에 나타나고 정시에 사라 지지만 회전하지는 않습니다.

아이디어가 있으십니까?

 $('#please-wait') 
     .css("visibility", "visible")//.hide() 
     .ajaxStart(function() { 
      $(this).css("visibility", "visible"); 
     }) 
     .ajaxStop(function() { 
      $(this).css("visibility", "hidden"); 
     }); 

또는

 $('#please-wait') 
     .show() 
     .ajaxStart(function() { 
      $(this).show();    
     }) 
     .ajaxStop(function() { 
      $(this).hide(); 
     }); 

아이디어 : 여기

는 jQuery 코드인가?

Answer 1

여기에 수행 할 수있는 방법 또는 수행 할 수있는 방법이 jsfiddle example입니다.

여기

$('#start_loading').click(function(){ 
 
    $('#display').html('<img src="http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif" />'); 
 
    setTimeout(function(){ 
 
     $('#display').html($('#content').html()); 
 
    }, 1000); 
 
}); 
 

 
$('#reset').click(function(){ 
 
    $('#display').html(''); 
 
});

body{ 
 
    background-color: white; 
 
} 
 

 
#content{ 
 
    display:none; 
 
} 
 

 
#display{ 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/jquery-1.6.3.min.js" type="text/javascript"></script> 
 
<button id='start_loading'>Load text</button> 
 
<button id='reset'>Reset</button> 
 

 
<div id='display'> 
 
</div> 
 

 
<div id='content'> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus ipsum, hendrerit vitae facilisis sit amet, viverra sit amet elit. Nullam interdum sodales tortor quis suscipit. Donec facilisis condimentum sodales. Nunc imperdiet vehicula aliquam. Etiam non ligula enim, non euismod dui. Aliquam in fermentum neque. Praesent auctor lectus eu magna gravida convallis. Donec semper hendrerit porta. In feugiat tellus a purus vulputate adipiscing. Aenean et risus nec nisl auctor scelerisque. Duis eleifend nunc ut odio consectetur scelerisque.</p><br/> 
 

 
    <p>Aliquam in scelerisque erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean dignissim orci at quam placerat a placerat sem porta. Nulla facilisi. Ut ligula lorem, faucibus sit amet eleifend id, fringilla ut orci. Aliquam viverra, enim a auctor tincidunt, neque dui sollicitudin enim, eget feugiat odio lacus cursus lacus. Nunc risus urna, elementum eu vehicula in, fringilla et ante. Aenean iaculis volutpat purus, vitae faucibus justo auctor at. Integer non fringilla nibh.</p><br/> 
 

 
<p>Quisque elementum, sapien in viverra mollis, magna nisl blandit tortor, ut tincidunt risus nulla id nunc. Fusce rutrum elementum mauris, id aliquam magna varius sed. Ut vestibulum elementum sapien et sagittis. Vestibulum vitae sem arcu. Nulla lacus dui, lacinia vitae dapibus ac, tincidunt vel lectus. In hac habitasse platea dictumst. Curabitur interdum ullamcorper odio, ullamcorper mollis ligula auctor eget. Donec aliquet arcu sed est dignissim pharetra. Praesent sit amet dui venenatis nisl ullamcorper convallis. Morbi rutrum neque id dui venenatis et bibendum felis placerat. </p> 
 
</div>

하면 다음 JQuery와의 오른쪽 부분을하고 있다면 확률은, 당신 .gif 참고가 반복주기가 없습니다 있습니다 의미는 한 번만 애니메이션 코드 조각입니다 . 추가/제거 대신 숨기기 만하므로 애니메이션을 재설정하지 않습니다.