0

最近、インターネット上の一部のページ (Gizmodo や io9 など) にページ読み込みアニメーションがあることに気付きました。後者の場合、前のページはグレー表示され、真ん中に小さな読み込み「スピナー」アニメーションが表示され、インターネット上のほとんどのページのように、間に空白の読み込みページなしで 2 番目のページが表示されます。これはどのように行われますか？

4

2 に答える 2

1

うまくいけば、これがうまくいく... jQueryが必要ですが、以下の解決策がうまくいきました：

最初にbodyタグの直後にこれを追加します：

<div id="loading">
  <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>

次に、div と画像のスタイル クラスを CSS に追加します。

#loading {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: #fff;
  z-index: 99;
  text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

最後に、この JavaScript をページに追加します (できればページの最後で、もちろん body タグを閉じる前に):

<script language="javascript" type="text/javascript">   
$(window).load(function() {
$('#loading').hide();   }); 
</script>

次に、スタイル クラスを使用して、読み込み中の画像の位置と読み込み中の div の背景色を調整します。

これで、問題なく動作します。もちろん、どこかに ajax-loader.gif が必要です。

AJAXLoadを試してみてください。素晴らしいアニメーション GIF がいくつかあります.. :)

于 2013-01-04T04:36:08.010 に答える
0

参照されているサイトは見ていませんが、jQuery の候補のようです。

ajax 呼び出しを使用してページのコンテンツを取得し、現在表示されているものの代わりとして現在の DOM に読み込みます。

jQuery フレームワークには、説明した動作を表示するためのアニメーションとプラグインがあります。私が気に入っているのは ColorBox (http://www.jacklmoore.com/colorbox) です。

于 2012-06-29T18:54:05.537 に答える