GIF загружен JavaScript, не анимированный в Google Chrome

Question

Я работаю над страницей для проекта ruby, который позволяет пользователю запускать сразу несколько сценариев оболочки из веб-интерфейса. Вся страница представляет собой пару входных форм и группу флажков для запуска сценариев. Рядом с каждым флажком есть метка и изображение состояния (нетронутый [неанимированный gif], загрузка [gif], success [png], fail [png]). Я тестировал в Firefox 51 и ничего не имею. Но когда я пытался использовать страницу в Google Chrome, изображения загружаются нормально, но загрузка gif фактически не анимируется. То, как это делается, заключается в замене изображения в поле с помощью JavaScript.

HTML

<div class="span3"> 
    <%= check_box_tag(:mail_harvest, 1, false) %> 
    <%= label_tag(:mail_harvest, "Mail Harvest (Google + AdobeLeaks)", :class => "checkbox inline") %> 
    <img src="/assets/project/wait.gif" id="mail_harvest_img" style="width:16px; height:16px; float:right;"></img> 
    <br /> 
    <%= check_box_tag(:file_harvest, 1, false) %> 
    <%= label_tag(:file_harvest, "File Harvest", :class => "checkbox inline") %> 
    <img src="/assets/project/wait.gif" id="file_harvest_img" style="width:16px; height:16px; float:right;"></img> 
    <br /> 
... 
</div> 

JavaScript

if(document.getElementById("mail_harvest").checked == true) 
{ 
    document.getElementById("mail_harvest_img").src = "/assets/project/loading.gif" 
    results = $.ajax({ 
    type:"POST", 
    url: "/console/discovery/mail_harvest", 
    data: { domain_name : domainInput }, 
    success: function(data) 
    { 
     document.getElementById("mail_harvest_img").src = "/assets/project/Check16.png" 
     //do some stuff 
    }, 
    error: function(data) 
    { 
     document.getElementById("mail_harvest_img").src = "/assets/project/X16.png" 
    }, 
    }); 
}//End of mail_harvest 

В основном при нажатии на кнопку отправки, страница не обновляется, но изображения для каждого выбранного инструмента будет заменен " погрузка "gif, а когда вызов ajax завершается успешно или неудачно, изображение меняется на галочку или x. Это прекрасно работает в Firefox и работает в основном отлично в Chrome (проверка или x появляется при успешном завершении или неудаче), за исключением загрузки gif. Это проблема с браузером, или я что-то пропустил в своем коде?

Заранее благодарю за любую помощь!

Answer 1

Я решил проблему, изменив способ обработки фотографий. Вместо того, чтобы постоянно менять источник тега изображения, я решил загрузить все изображения вместе при загрузке страницы, при этом скрытая загрузка, галочка и х все скрыты. Когда мне нужно изменить изображение, я использую JQuery, чтобы скрыть и показать изображения, размещая

HTML

<div class="span3"> 
    <%= check_box_tag(:mail_harvest, 1, false) %> 
    <%= label_tag(:mail_harvest, "Mail Harvest (Google + AdobeLeaks)", :class => "checkbox inline") %> 
    <%= image_tag("project/wait.gif", :id => "mail_harvest_wait_img") %> 
    <%= image_tag("project/loading.gif", :id => "mail_harvest_loading_img", :class => "hidden") %> 
    <%= image_tag("project/Check16.png", :id => "mail_harvest_check_img", :class => "hidden") %> 
    <%= image_tag("project/X16.png", :id => "mail_harvest_x_img", :class => "hidden") %> 
    <br /> 
... 
</div> 

JavaScript

if(document.getElementById("mail_harvest").checked == true) 
{ 
    $('#mail_harvest_wait_img').addClass('hidden'); 
    $('#mail_harvest_loading_img').removeClass('hidden'); 
    results = $.ajax({ 
    type:"POST", 
    url: "/console/discovery/mail_harvest", 
    data: { domain_name : domainInput }, 
    success: function(data) 
    { 
     $('#mail_harvest_loading_img').addClass('hidden'); 
     $('#mail_harvest_check_img').removeClass('hidden'); 
     //do some stuff 
    }, 
    error: function(data) 
    { 
     $('#mail_harvest_loading_img').addClass('hidden'); 
     $('#mail_harvest_x_img').removeClass('hidden'); 
    }, 
    }); 
}//End of mail_harvest