加载页面时动画 GIF 没有动画

2023-12-01

我有一个使用 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 移动了“一点点”,但并不像预期的那样。

如何使其在加载期间不间断地呈现动画?


老问题,但将此发布给谷歌同事:

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

加载页面时动画 GIF 没有动画 的相关文章

随机推荐