IE7/IE8和凍結的動畫gif

這是我如何使我的gif動畫：

<img id='loading' alt='loading' style="display: none; position: 
    relative; left:10px; top:2px;" src="<%= Url.Image("loading.gif") %>" />

這是我多麼拼命的時刻表現出來：

showLoading: function(gifId, butId) { 
     var n = gifId != undefined ? gifId : 'loading'; 
     var l = $('#' + n); 

     //if browser is stupid 
     if ('v' == '\v') { 
      var s = l.attr('src'); 
      var x = document.getElementById(n); 
      x.style.visibility = "visible"; 
      x.style.display = "inline"; 
      setTimeout("document.getElementById('" + n + "').src = '"+s+"';", 
         100); 
     } else { 
      l.show(); 
     } 
     if (butId != undefined) 
      $('#' + butId).css('cursor', 'default').attr("disabled", true); 
    },

問題：出現 GIF動畫凍結，沒有動畫

奇怪的是，在其他網頁上，一切都像一個魅力。

P.s.這是痛苦的不是咆哮關於IE瀏覽器...啊...

編輯：

與跨度纏：

<span id='loading' style='display: none; 
       position: relative; left: 0px; top: 2px;'> 
       <img alt='loading' src="<%= Url.Image("loading.gif") %>" /> 
      </span>

改變JS來：

if ('v' == '\v') { 
      var f = function() { 
       l.show(); 
       l.attr('src', l.attr('src')); 
      }; 
      setTimeout(f, 100); 
     } else { 
      l.show(); 
     }

和神祕的 - 現在起作用。

來源

2009-11-26 Arnis Lapsa

你可以咆哮IE，沒有人會發瘋。我有同樣的錯誤...通常IE並不喜歡.src。如果我是你，我會用別的東西去做 – marcgg 2009-11-26 13:17:00

重置src是一個破解應該解決這個問題的黑客（http://www.ryantetek.com/2009/06/animated-progress-loading-bar-upon-形式提交的JavaScript /）。不知何故，它不。 – 2009-11-26 13:19:58

不......我不應該咆哮。材料太多了。肯定會被禁止。：D – 2009-11-26 13:25:26

我碰到過這一次。如果我試圖在瀏覽器移動到需要加載一段時間的頁面時使用JavaScript來顯示一些加載內容，IE將不會爲GIF添加動畫。我解決它直接把裝載活動指示器到HTML（通過JavaScript未插入）在一個隱藏的div：

<div id="pseudo-progress-area" style="display: none;"> 
    <h3>Please wait while we process your PayPal transaction...</h3> 
    <p style="text-align: center;"> 
     <img src="/Media/Template/Images/LoadingProgressBar.gif" alt="" /> 
    </p> 
</div>

，然後使用JavaScript來一個短暫的延遲後切換div的可見性（這是使用舊版本的原型庫，但你的想法）：

<script type="text/javascript">  
    // We have to call this function via a setTimeout() or else IE7 won't 
    // animate the GIF as the next page is loading. 
    var fnHideConfirmation = function() { 
     Element.hide('confirmation-area'); 
     Element.show('pseudo-progress-area'); 
    };  
</script>

這個功能被觸發表單的提交按鈕：

<input 
    type="submit" 
    class="button" 
    name="SubmitConfirmation" 
    value="Buy Now →" 
    onclick="setTimeout(fnHideConfirmation, 50);" />

因此，而不是拖延ŧ他的src屬性發生變化，不要理會它，只是延遲對整個showLoading（）函數的調用。祝你好運！

來源

2009-11-26 13:24:34

謝謝。以某種方式工作。我什至不想知道究竟是什麼修復它。：D – 2009-11-26 13:39:37

哈！我會告訴你，但我不記得它爲什麼修復它，只是它修復了它。 =） – 2009-11-26 13:43:29

@NicholasPiasecki這不適合我，你能幫我嗎？ :( – user2705620 2013-10-22 05:43:05

Spin.js適用於此用例。

來源

2011-08-22 17:58:15 Entendu

注意到spin.js，看起來相當不錯 – 2011-08-23 06:56:20

我發現接受的答案有點複雜，難於理解或不過實現我有同樣的問題，而這樣做，

我下面的HTML

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;"> 
    <img src="images/progress_wheel.gif" style="margin-top: 204px;"/> 
    <p class='arbitText' style="font-weight: bold;">Processing, Please wait!</p> 
</div>

和Java腳本我這樣做

function onSubmit() { 

    var divProgressWheel = document.getElementById("progress_wheel_div"); 
    divProgressWheel.style.display = "block"; 
}

，但它不是動畫GIF文件，

個解決方案

更新我的Java腳本，並使其像下面

function onSubmit() {  
    setTimeout(showProgress, 500); 
} 

function showProgress() { 

    var divProgressWheel = document.getElementById("progress_wheel_div"); 

    divProgressWheel.innerHTML = "<img src='images/progress_wheel.gif' style='margin-top: 204px;'/><p class='arbitText' style='font-weight: bold;'>Processing, Please wait!</p>"; 
    divProgressWheel.style.display = "block"; 
}

請注意divProgressWheel.innerHTML是一樣的東西，我在HTML。因此，我們可以刪除不必要的html，所以修改後的html會是;

<div id="progress_wheel_div" align="center" style="height:100%; display:none; vertical-align: middle;"> 

    </div>

來源

2014-04-08 04:15:17

IE7/IE8和凍結的動畫gif

回答

相關問題