1

タイトルを正しく表現する方法がわかりませんでしたが、これが私が行っていることです。HTMLの本文に2つの画像があります。

<img src="http://www.narm.org.uk/home/images/Daylight%20design.jpg" id="b1" alt="day" />
<img src="http://www.aphoenix.ca/photoblog/photos/NighttimeColours.jpg" id="b2" alt="night" />

対応するcssは次のとおりです（基本的にそれらの1つを背景にします）：

#b1, #b2 {
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}

これがjavascriptです：

window.onload = function() {
setBackground();
}

function setBackground() {
var back1 = $('#b1').hide();
var back2 = $('#b2').hide();
//setTimeout(function() {setBackground()}, 1000);
}

現在、ページが読み込まれるまで待っているため、1つの画像が一時的に表示され、両方の背景が非表示になります。ページが完全に読み込まれる前に背景を非表示にするにはどうすればよいですか。

4

5 に答える 5

3

たぶんあなたの画像にcssが付いています：

display: none;

したがって、スタイルは次のようになります。

#b1, #b2 {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    display: none;
}
于 2012-11-14T16:37:36.153 に答える
1

jQuery.readyを使いたいと思います：

jQuery(function($) {
    var back1 = $('#b1').hide();
    var back2 = $('#b2').hide();
});

このwindow.onload関数は、すべての外部ソース（スタイル、スクリプト、画像など）が読み込まれたときに起動されます。

jQueryのreadyメソッドは、DOMの準備ができたときに起動されます。

違いについての小さな記事

于 2012-11-14T16:37:41.053 に答える
0

この関数をwindow.onload呼び出しから取り出し、ページ上部の2つのスクリプトタグの間に移動します。ブラウザは上から下に読み取るため、コードを検出するとすぐに実行します。

したがって、コードを次のように表示します。

<head>...
<script>
setBackground();
</script>
...</head>
于 2012-11-14T16:38:59.927 に答える
0

このためのカスタム関数を作成する必要があると思います。すべてのコンテンツを非表示にすることができます。ページの準備ができたら、.load（）背景を非表示にして、新しい背景とコンテンツを表示します。

于 2012-11-14T16:43:55.740 に答える
0

私が正しく理解していれば、画像をプリロードして、必要になるまで非表示にしておく必要があります。

JavaScriptではなく、cssがここに行く方法のようです。display:none;ただし、一部のブラウザを使用している場合は、画像の読み込みを遅らせることがあります。私の提案は、画像を画面外に移動することです。

#b1, #b2 {
left: -9999px;
top: -9999px;
z-index: -1;
position: absolute;
}

[更新]これがdisplay：noneのテストページです： http ：//www.quirksmode.org/css/displayimg.html

Operaは画像をロードしないと書かれています。

于 2012-11-14T17:09:23.300 に答える