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 クラスは、アニメーション gif をその li 要素の背景に割り当てています。これはうまく機能しますが、画像は動きません。その後、li に「focus()」を適用すると、これが解決されます。

<li><a .. onclick="this.parentNode.className = "_indicator'; this.parentNode.focus(); ...
于 2011-06-03T21:06:02.560 に答える
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 に答える
0

背景CSSプロパティを設定して、アニメーション中に表示したいgif画像を含めることができます。

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

.5 は不透明度を示します。URL 部分では、gif 画像の相対 URL または完全な URL を指定できます。

于 2012-06-20T07:53:48.427 に答える
0

試しましたsetInterval()か？setTimeout は 1 回だけ実行されますが、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 に答える