5

我有一个使用 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("document.getElementById('loadinggif').src = 'graphics/loading.gif'", 100);

也一样，它使 gif 移动了“一点”，但并不像预期的那样。

我怎样才能让它在加载过程中不间断地动画？

4

5 回答 5

12

老问题，但将其发布给谷歌同事：

Spin.js 确实适用于这个用例： http ://fgnass.github.com/spin.js/

于 2011-08-22T17:57:56.290 回答
2

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

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

CSS-Class 将动画 gif 分配给该 li 元素的背景。这很好用，但图像没有移动。之后将“focus()”应用于 li 解决了这个问题：

<li><a .. onclick="this.parentNode.className = "_indicator'; this.parentNode.focus(); ...
于 2011-06-03T21:06:02.560 回答
0

你试过setInterval()吗？setTimeout 只运行一次，而 setInterval 连续运行直到停止。

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

...完成加载后....

clearInterval(x);

虽然，现在我考虑了一下，您的所有代码所做的只是将图像源设置为动画 gif。真正的问题是，在后台进行大量 jScript 处理并且不运行动画时，IE 似乎被“锁定”了。

您可以尝试将动画中的所有 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-09T16:24:39.483 回答
0

您可以设置背景 CSS 属性以包含您想要在动画期间显示的 gif 图像。

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

.5 表示不透明度；在 URL 部分，您可以为您的 gif 图像提供相对或完整的 URL。

于 2012-06-20T07:53:48.427 回答
0 
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-29T08:00:44.640 回答