加載頁面時動畫GIF不生成動畫

我有一個使用asp.net（C＃）生成serverside的頁面。加載頁面需要一段時間，因爲它有多達100個iframe。我想顯示「請稍候」動畫GIF，而頁面加載，所以我有以下幾點：加載頁面時動畫GIF不生成動畫

<style type="text/css"> 
    #blackout 
    { 
     filter:alpha(opacity=70); 
     -moz-opacity:0.7; 
     opacity:0.7; 
     position:absolute; 
     background-color:#222233; 
     z-index:50; 
     left:0px; 
     top:0px; 
     right:0px; 
     bottom:0px; 
     width:102%; 
     height:102%; 
    } 
    #loading 
    { 
     filter:alpha(opacity=100); 
     -moz-opacity:1; 
     opacity:1; 
     position:fixed; 
     text-align:center; 
     background-color:#EEEEEE; 
     top:50%; 
     left:50%; 
     margin-top:-55px; 
     margin-left:-75px; 
     width:150px; 
     height:75px; 
     z-index:100; 
    } 
    </style> 
</head> 
<body onload="document.getElementById('loading').style.visibility='hidden';document.getElementById('loading').style.display='none';document.getElementById('blackout').style.visibility='hidden';document.getElementById('blackout').style.display='none';"> 
    <div id="blackout"> 
     <div id="loading"><img id="loadinggif" src="graphics/loading.gif" alt="" style="margin-top:12px; "/><br />Please wait...</div> 
     <script type="text/javascript" language="javascript"> 
      document.getElementById('loadinggif').src = 'graphics/loading.gif'; 
     </script> 
    </div> 
    <form id="form1" runat="server">

所以問題是，加載GIF不動。我試圖使用

setTimeout("document.getElementById('loadinggif').src = 'graphics/loading.gif'", 100);

太多了，它使gif移動「一點點」，但沒有達到預期的效果。

如何在加載過程中使其動畫不間斷？

來源

2011-04-29 Jesper

setTimeout(function(){document.getElementById('loadinggif').src = 'graphics/loading.gif'}, 100);

它作爲一個功能，看你的報價

您可能希望做這樣。聲明在HTML中的src，但有它的隱藏，然後執行：

setTimeout(
    function() { 
    document.getElementById('loadinggif').style.display ='block'; 
     setTimeout(
      function() { 
      document.getElementById('loadinggif').style.display = 'none'; 
      }, 100); 
    }, 100);

來源

2011-04-29 08:00:44 Atticus

感謝您的回覆。第一種解決方案的結果與 'code'setTimeout（「document.getElementById（'loadinggif'）。src ='graphics/loading.gif'」，100）; 它在Firefox中工作，但在IE瀏覽器中，它只是時不時移動一個檔次。第二個建議根本沒有顯示任何gif。我知道這是一個IE問題，但我想知道是否有一種方法可以使它在IE中像在FF中一樣始終處於動畫狀態。 – Jesper 2011-04-29 08:12:22

你能鏈接gif嗎？ – Atticus 2011-04-29 08:12:44

我正在使用這一個： [http://epc.inet4.com/images/dialog/loading.gif](http://epc.inet4.com/images/dialog/loading.gif） – Jesper 2011-04-29 08:18:15

我有一個類似的問題，發現一個很簡單的解決方案 - 我的標記看起來有點像這樣：

<li><a href="#" onclick="this.parentNode.className = '_indicator'; doSomething();">Foo</a></li>

的CSS- Class正在爲該li元素的背景分配一個動畫gif。這很好，但圖像不動。將「focus（）」應用於li之後解決了這個問題：

來源

2011-06-03 21:06:02 Nikolas

你試過了嗎setInterval()？ setTimeout只運行一次，而setInterval則連續運行直到停止。

var x = setInterval(document.getElementById('loadinggif').src = 'graphics/loading.gif', 100);

...加載完成的時候....

clearInterval(x);

雖然，現在我想想，所有的代碼做的是設置圖像源的gif動畫。真正的問題在於IE在後臺進行大量jScript處理並且不運行動畫時似乎被「鎖定」。

您可以嘗試將動畫中的所有gif作爲單獨的文件，然後使用interfval函數將src更改爲模仿相同的動畫。

也許服用點是這樣的...

//global var 
var imgIndex = 0; 



var x = setInterval(changeImgSrc, 100);

...加載完成的時候....

clearInterval(x); 


function changeImgSrc(i){ 
document.getElementById('loadinggif').src = 'graphics/loading' + (imgIndex++) + '.gif' 
}

來源

2011-08-09 16:24:39 Remus

老問題，但是這張貼同胞的Google：

旋.js是否適用於此用例： http://fgnass.github.com/spin.js/

來源

2011-08-22 17:57:56 Entendu

You c一個剛剛設置的backgroung CSS屬性來包含您想要在動畫過程中顯示的gif圖像。

background: rgba(198, 226, 255, .5) 
       url('images/15.gif') 
       50% 50% 
       no-repeat;

。5表示不透明度; 在URL部分中，您可以爲您的gif圖像提供相對或完整的URL。

來源

2012-06-20 07:53:48 Ankit

加載頁面時動畫GIF不生成動畫

回答

相關問題