Javascript 加载页面时已设置动画的GIF不会设置动画_Javascript_Onload_Gif_Animated

Javascript 加载页面时已设置动画的GIF不会设置动画

javascript

Javascript 加载页面时已设置动画的GIF不会设置动画,javascript,onload,gif,animated,Javascript,Onload,Gif,Animated,我有一个使用asp.net（C#）在服务器端生成的页面。加载页面需要一段时间，因为它最多有100个iFrame。我想在加载页面时显示“请稍候”动画gif，因此我有以下内容： <style type="text/css"> #blackout { filter:alpha(opacity=70); -moz-opacity:0.7; opacity:0.7; position:absolute;

我有一个使用asp.net（C#）在服务器端生成的页面。加载页面需要一段时间，因为它最多有100个iFrame。我想在加载页面时显示“请稍候”动画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(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);

我遇到了一个类似的问题，并找到了一个非常简单的解决方案-我的标记看起来有点像这样：

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

CSS类正在将动画gif指定给该li元素的背景。这非常有效，但图像不移动。将“focus（）”应用于li解决了以下问题：

<li><a .. onclick="this.parentNode.className = "_indicator'; this.parentNode.focus(); ...

您是否尝试过setInterval（）
？setTimeout仅运行一次，而setInterval则持续运行，直到停止
var x = setInterval(document.getElementById('loadinggif').src = 'graphics/loading.gif', 100);

。。。加载完成后
clearInterval(x);

clearInterval(x);


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

不过，现在我想起来了，您的代码所做的只是将图像源设置为动画gif。真正的问题是，IE在后台执行大量jScript处理时似乎被“锁定”，并且不运行动画
您可以尝试将动画中的所有gif作为单独的文件，然后使用INTERVAL函数更改src以模拟相同的动画
background: rgba( 198, 226, 255, .5 ) 
                url('images/15.gif') 
                50% 50% 
                no-repeat;

也许是这样的
//global var
var imgIndex = 0;



var x = setInterval(changeImgSrc, 100);

。。。加载完成后
clearInterval(x);

clearInterval(x);


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

老问题，但发布给谷歌同行：
Spin.js适用于此用例：
您只需将Background CSS属性设置为包含要在动画期间显示的gif图像
background: rgba( 198, 226, 255, .5 ) 
                url('images/15.gif') 
                50% 50% 
                no-repeat;

.5表示不透明度；
在URL部分，您可以给出gif图像的相对或完整URL。
谢谢您的回复。第一个解决方案给出了与setTimeout相同的结果（document.getElementById（'loadinggif'）.src='graphics/loading.gif'，100）；它在firefox中工作，但在IE中只是偶尔移动一个档次。第二个建议根本不显示gif。我知道这是一个IE问题，但我想知道是否有一种方法可以让它在IE中像在FF中一样一直处于动画状态。我正在使用这个方法：我能想到的唯一一件事是动态更改src或让元素以display=none开头，就是在执行此命令时它必须加载图像。。也许IE在所有渲染后都无法注册图像？尝试执行visiblity=hidden，然后使其可见，这将使渲染器加载gif进行一些测试，似乎IE在加载内容时忙于其他事情而不关心gif的动画：）因此，我将展示一个非动画沙漏，哈哈…我真的很感谢您的帮助，但我认为没有任何解决办法。