Google ChromeでJavaScriptがアニメーション化されていないGIFがロードされています

Question

Rubyプロジェクトのページで、Web UIから複数のシェルスクリプトを一度に実行できるようになりました。ページ全体はいくつかの入力フォームと、実行するスクリプトのチェックボックスの束です。各チェックボックスの横には、ラベルとステータス画像（[アニメーションなしgif]、[gif]、成功[png]、失敗[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 

基本的には、送信ボタンをクリックすると、ページがリロードされませんが、選択した各ツールのイメージが置き換えられます」 loading "gifを呼び出し、ajax呼び出しが成功するか失敗すると、イメージはチェックマークまたはxに変わります。これはFirefoxでうまく動作し、読み込み中のgifを除いてほとんどの場合Chromeで正常に動作します（チェックまたはxが成功または失敗したときに表示されます）。これはブラウザの問題ですか、私のコードで何か不足していますか？

ご協力いただきありがとうございます。

Answer 1

写真の扱い方を変更して問題を解決しました。イメージタグのソースを常に変更する代わりに、読み込み、チェックマーク、およびxをすべて非表示にして、すべてのイメージをページ読み込みに一緒に読み込むことにしました。私は、画像を変更する必要がある場合、私は

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 

JavaScriptを非表示にし、必要に応じ

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> 

などの画像を表示するためのjQueryを使用します