logo标签列表

加载页面时的动画GIF无法播放

javascriptonloadgifanimated
5

我有一个使用asp.net（C#）在服务器端生成的页面。由于该页面最多包含100个iframes，因此加载页面需要一些时间。我想在页面加载时显示“请稍候”的动画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">

所遇到的问题是加载图标不动了。我已经尝试使用：
setTimeout("document.getElementById('loadinggif').src = 'graphics/loading.gif'", 100);

我也尝试过，它确实让gif动了“一点点”，但不是预期的效果。

我该如何使其在加载时无间断地播放动画？

5个回答
12

虽然这个问题已经有一段时间了，但为了帮助其他谷歌用户，我来发表一下我的看法：

Spin.js适用于此情况： http://fgnass.github.com/spin.js/

2

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

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

CSS-Class 会将一个动态图片分配给 li 元素的背景。这样做效果非常好，但是图片不会动起来。之后将 "focus()" 应用于该 li 元素就可以解决这个问题：

<li><a .. onclick="this.parentNode.className = "_indicator'; this.parentNode.focus(); ...
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'
}
0
你可以将背景CSS属性设置为包含动画期间要显示的gif图像。
background: rgba( 198, 226, 255, .5 ) 
                url('images/15.gif') 
                50% 50% 
                no-repeat;

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

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);
感谢您的回复。第一个解决方案与以下代码的结果相同：codesetTimeout("document.getElementById('loadinggif').src = 'graphics/loading.gif'", 100); 它在Firefox中可以工作，但在IE中只会偶尔移动一下。第二个建议根本没有显示gif。我知道这是IE的问题，但我想知道是否有办法使它在IE中像在FF中一样始终动画。 - Jesper
我正在使用这个：http://epc.inet4.com/images/dialog/loading.gif - Jesper
我能想到的唯一可能是动态更改src或使元素起始时display = none，这样在执行此命令时必须加载图像...也许IE在所有内容渲染完成后注册图像时存在错误？尝试将visiblity = hidden然后使其可见，这将使gif随着渲染而加载。 - Atticus
经过一些测试，似乎IE太忙于其他事情而无法在加载内容时播放动画gif :)所以我只会显示一个非动画沙漏，哈哈... - Jesper
我非常感谢你的帮助，但我认为没有任何解决方案。 - Jesper
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接