IE зависает GIF анимацию, когда DOM вставить

Question

Моего кода имеет анимированный GIF (загрузка изображение)

я получаю страницу HTML в переменных «данных» от Ajax вызова.

$("#content").html(data); // takes about 5 seconds and the GIF animation freezes since IE is single threaded. 

Есть ли способ, чтобы написать данные построчно с SetTimeout/setInterval функции так, чтобы нить отпускается на короткое время так, что анимация продолжается?

Fiddle URL: http://jsfiddle.net/deepakssn/Kp2bM/

Альтернативное решение, которое я пробовал:

<style> 
#loading { 
     background: url(loading.gif) no-repeat center center #fff; 
     display: block; 
     position: fixed; 
     height: 500px; 
     width: 500px; 
} 
</style> 
<script src="../scripts/jquery.js"></script> 
<script> 
$(window).load(function() { 
    function writeData(data) { 
     var yourLines = data.split("\n"); 
     for (var i = 0, j = yourLines.length; i < j; i++) {    
      var x = setTimeout(function() {     
       $("#content").append(yourLines[i]); 
       console.log("Line No :"+[i]+" "+Date.now());     
      }, 5000); 
     }   
    } 
    function ajaxLoad() { 
      $.ajax({ 
        url: "test.txt" 
      }).done(function (data) {       
        console.log("success"+Date.now()); 
        writeData(data); 
        //$("#content").html(data); 
        console.log("loaded data"+Date.now()); 

      }); 
    } 
    ajaxLoad(); 
}); 
</script> 
<div id="loading"></div> 
<div id="content"></div> 

Answer 1

Я столкнулся с этой проблемой при добавлении индикатора 'загрузки' для одного из моих проектов. Я использовал this, который решил проблему для меня. Поскольку это не изображение, оно не замерзает.