1

これが可能かどうかはわかりません。すでに解決策を探してみましたが、まったく運がありませんでした。

背景がわずかに透明（またはぼやけている）で、アニメーションGIF（loader-bar.gif）を使用して全ページのロード画面を試しています。これはjQueryで可能だと思いますが、これを実現する方法が本当にわかりません。

私はすでにいくつかのことを自分で試しましたが、常に同じまたは同様の問題が発生します。または、ページの読み込み中および/またはローダーページが領域全体をカバーしていない場合、特に追加のコンテンツが表示されている場合（height：100％でも、これに対する唯一の「修正」は高さ：300％を使用しますが、もちろんそれは解決策ではありません）。

だから私はフルスクリーン/ウィンドウローダーページをやり直すことにしました、おそらくjQueryはこの仕事を正しく行うことができますよね？

4

3 に答える 3

7

私はおそらくこのようにそれを解決するでしょう：デモを試してください

利点は、オーバーレイのコンテンツが中央に配置され、背景画像に固執しないことです。したがって、たとえば「スタンバイ」というテキストとアニメーションGIFなど、任意のコンテンツをオーバーレイに配置できます。

CSS

body, html {
    margin:         0;
    padding:        0;
}

div.overlay {
    display:        table;
    position:       fixed;
    top:            0;
    left:           0;
    width:          100%;
    height:         100%;
}
div.overlay > div {
    display:        table-cell;
    width:          100%;
    height:         100%;
    background:     #ccc;
    text-align:     center;
    vertical-align: middle;
}

HTML

<div class="overlay"><div>CENTERED ICON</div></div>

JavaScript

// on load finished
$(window).load(function() {
    // select element and fade it out
    $('.overlay').fadeOut();
});

$(window).load()すべてが完全にロードされたときにこれが発生するので、画像も使用する必要があることに注意してください。

于 2012-08-01T11:09:50.867 に答える
3

要素を定義するか、またはjsを介して追加してみてください。たとえば、本体の最初のノードとして定義します。

<div id="load">Please wait</div>

このスタイルで

html, body, #load { height: 100%; width: 100%; }
#load {
   position    : fixed;
   z-index     : 1; /* or higher if necessary */
   top         : 0;
   left        : 0;
   overflow    : hidden;
   text-indent : 100%;
   font-size   : 0;
   background  : url(some-animated-loader.gif) center no-repeat;
}

load次に、またはDomReadyイベントが発生したときにそのdivを削除（または非表示）します

于 2012-08-01T10:56:09.287 に答える
3

このようなものを試してください-> http://jsfiddle.net/3wU6C/5

于 2012-08-01T11:02:50.887 に答える