0

基本的にはウェブページにすべてを読み込ませますが、画像が大きいため、ブラウザがまだダウンロードしている間は表示しません。

代わりに、ブラウザが画像のダウンロードを終了したときに、この背景を (フェード効果で)表示したいと考えています。

問題は、タグbackground-image内に設定する必要があるため、またはbodyを使用して jQuery を適用したくないということです。これは、実質的に Web ページ全体を非表示にするためです。$('body').hide;$('body').show;

私はこの機能を検索してきましたが、人々が別のタグでそれらを表示/非表示にしたい場合しか見つかりませんでした (body私の場合はすべてをラップするタグではなく)。

それは可能ですか、それとも火星自体に到達しているだけですか? ご協力いただきありがとうございます！

4

4 に答える 4

0

ページがロードされた後に body background-image プロパティを次のように設定するだけです:

jQuery('body').css('background-image', 'url(path/to/some/image.jpg)');

ここでそれを参照してください：http://jsfiddle.net/duffmaster33/Z9pEg/

于 2013-05-19T18:07:05.683 に答える
0

次のことをお勧めします。

  1. ドキュメントとは別に画像をダウンロードします。
  2. 次に、JavaScript で画像を読み込みます

  3. ダウンロードが完了したときにのみバックグラウンドに設定します（キャッシュされるため、画像のsrcを指すだけで機能します）

    var img = new Image();
img.onload = function() { .$('body').css('background-image', 'url(' + http://path/to/image.jpg +  ')'); }
img.src = "http://path/to/image.jpg";

  4. オプション: ドキュメントの読み込みが完了したら、すべてを実行します (関数本体を次のようにラップします: 

    function () { $(ready) { function() { .$('body').css('background-image',                  'url(' +     http://path/to/image.jpg +  ')'); }  }
于 2013-05-19T18:07:13.660 に答える
0

2 つの CSS クラスを作成する必要があります。bodyloadingとbodyloaded。最初のものは body タグのデフォルトのクラス名です。ページが読み込まれた後、body タグのクラス名を次のように変更できます。bodyloaded

document.body.className = "bodyloaded";

したがって、2 番目の css が表示されます (背景画像が含まれます)。

于 2013-05-19T18:07:21.873 に答える
0

を使用$('body').hideすると、背景画像だけでなく要素全体が非表示になります。つまり、何も表示されません。CSSの変更を使用して背景画像を設定するだけです

$('body').css("background-image", "url(picture.jpg)");
于 2013-05-19T18:07:43.010 に答える