GIF的加載JavaScript而不是在谷歌瀏覽器的動畫

我正在爲一個紅寶石項目的頁面工作，允許用戶從Web UI一次運行多個shell腳本。整個頁面是一對輸入表單，以及一些用於運行腳本的複選框。除了每個複選框，還有一個標籤和一個狀態圖像（未觸及[非動畫gif]，加載[gif]，成功[png]，失敗[png]）。我一直在Firefox 51中測試，並且沒有任何問題。但是，當我嘗試在Google Chrome中使用該頁面時，圖像加載正常，但加載gif實際上並未實現動畫效果。完成的方式是使用JavaScript替換字段中的圖像。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中運行得很好，除了加載gif之外，在Chrome中工作得很好（檢查或x出現在成功或失敗中）。這是瀏覽器的問題，還是我在代碼中丟失了某些東西？

在此先感謝，任何幫助表示讚賞！

來源

2017-02-08 J. Loffhagen

我通過改變處理照片的方式解決了這個問題。我不是經常更改圖片標籤的來源，而是選擇在頁面加載時將所有圖片加載到一起，加載，選中標記和x全部隱藏。當我需要改變形象，我使用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

來源

2017-02-09 15:58:56

GIF的加載JavaScript而不是在谷歌瀏覽器的動畫

回答

相關問題