爲什麼在進行AJAX調用時GIF動畫停止工作？

Question

我的目標是顯示一個加載彈出框（其中包含一個GIF），同時我做一個AJAX調用。 我正在使用jQuery UI Modal dialog，其中我使用CSS插入GIF動畫。之前，AJAX呼叫開始，我打開對話框並在呼叫結束後立即關閉。問題在於，當AJAX調用正在運行時，GIF停止工作，並在所有瀏覽器中發生。我正在使用以下代碼：

<div id="loadingScreen" title="Loading">Please wait...</div> 

#loadingScreen { 
    background: url(http://regretless.com/stuff/jQuery/images/loading.gif) no-repeat 5px 8px; 
    padding-left: 25px; 
} 

$("#loadingScreen").dialog('open'); 
setTimeout(function() { 
    $.ajax({ 
    type: "GET", 
    url: "testing.txt", 
    async: true, 
    dataType: "text", 
    success: function (returnText) { 
     $("#viewDescription").text(returnText); 
     $("#viewGroupID").text(" " + t.id); 
     $("#loadingScreen").dialog('close'); 
     $('#View').dialog('open'); 
    }, 
    error: function (xhr, status, error) { 
     $("#loadingScreen").dialog('close'); 
     alert("An error has occured"); 
    } 
    }); 
}, 10); 

任何人都可以告訴我該問什麼問題？

Answer 1

因爲這是一個背景，所以您需要將焦點設置爲#loadingScreen以保持動畫繼續。