ローディングスピナー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です。あなたはjQueryの右側の部分をやっている場合はここ

はスニペット

$('#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>

だ後、オッズは、あなたの.GIFは、それが一度だけアニメーション化を意味し、繰り返し周期を持っていないです。追加/削除するのではなく隠すだけなので、アニメーションはリセットされません。