加載微調gif圖像卡住

Question

我有一個6kb的動畫gif加載微調。當我在瀏覽器窗口中打開它時，它旋轉正常。但是當它打開我的網頁上的ajax調用時，它就卡住了。它看起來按時和消失，但不會旋轉。

任何想法？

這裏是jQuery代碼：

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

什麼想法？

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注意：沒有一個重複週期，這意味着它只能一次動畫。由於您只隱藏它而不是添加/刪除，因此不會重置動畫。