0

Web サイト内のボタン (リンクと送信ボタン) がクリックされるたびに、Web ページ全体にオーバーレイを表示し、GIF アニメーションの「読み込み中...」スピナーを Web サイトに表示したいと考えています。Web サイトは iPhone Web アプリ (「ホーム画面に保存」) として機能する必要があります。したがって、「window.location」が必要です ( Oskarsの コメントを参照)。私はサードパーティのライブラリを使用しておらず、今後も使用しません (jquery などは使用しません)。

何が機能しますか：

  • オーバーレイはすべてのボタンで機能します
  • フォーム送信ボタンのオーバーレイと GIF アニメーションの機能
  • リンクをクリックするとGIFが表示されますが...

機能しないもの:

  • リンクをクリックしても、GIF はアニメーション化されません。Firefox、Internet Explorer、Chrome のそれぞれの最新バージョンを使用しています。私がグーグルで見つけたのは、「古い」悪、つまりバージョンへの参照だけですが、ここではそうではありません。

あなたへの私の質問:

  • GIFをアニメーション化するにはどうすればよいですか?

とりあえず、このコメントを信じて黙ります…

HTMLとJavaScriptで私が持っているものは次のとおりです。

<div id="overlay"></div>
<div id="page">
  <a onclick="document.getElementById('overlay').style.display = 'block';
              window.location='/';
              return false;" 
     href="/" 
     title="home" 
     alt="home">
     home
  </a>
</div>

これが私がCSSに持っているものです：

div#page {
    position:absolute;
    top: 0px;
    left: 0px;
    width:100%;
}
div#overlay {
    display: none;
    z-index: 10000;
    background: #000;
    position: fixed;
    width: 100%;
    opacity: .6;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image:url("spinner.gif");
    background-repeat:no-repeat;
    background-position:center;
}

(「spinner.gif」はhttp://www.melabev.org/images/spinner.gifのようになります)

ここに jsfiddle バージョンがあります: http://jsfiddle.net/87paH/2/

4

2 に答える 2

0

次のページをロードするプロセスによって、アニメーションが中断されている可能性があります。リンクとスピナー アニメーションを含むテスト ページを作成しました。リンクをクリックすると、ブラウザが新しいページをロードしている間、アニメーションが停止しました。アニメーションを停止するのは、このようなブラウザーの動作だけではありませんか? onclick から "window.location = '/'" を削除すると、アニメーションは機能しますか?

新しいページにシームレスに移動したい場合は、AJAX を使用して Javascript で HTML を取得し、ページのコンテンツを取得した内容に置き換えることができます。AJAX が実行されている間、オーバーレイ スピナーは問題なく動作するはずです。

于 2013-02-26T15:53:10.340 に答える
0

これを試すことができます：

  <a href="javascript:overlayFunc()" onclick="overlayFunc()" title="home" alt="home">
     home
  </a>


function overlayFunc(){
    document.getElementById('overlay').style.display = 'block';
    window.setTimeout('window.location="/"', 1500);

    return false;
}
于 2013-02-26T15:55:06.977 に答える