ページ上の白い背景を削除する代わりに画像を表示する

Question

show 2_image.jpgの代わりにページの読み込み時に白い背景を削除する必要があります。その後、body image 1_image.jpgが表示されます。スクリプトが使用される可能性があります。私はこれを試しましたが動作しません。

<style> 
body { 
    background: url("../images/1_image.jpg") #070707; 
    background-color:#070707; 
    background-attachment: fixed; 
    background-size: cover; 
    background-repeat:no-repeat; 
} 
.box { 
    background:url("../images/2_image.jpg") no-repeat; 
    background-size:cover; 
    background-position:center; 
    background-attachment: fixed; 
    width:100%; 
    height:100%; 
    position:absolute; 
    z-index:9999; 
    top:0px; 
} 
</style> 
<div class="box"></div> 

Answer 1

ここでは、サンプルアプローチです。

2つのクラスを作成すると、divを非表示にすることができます。

.hidden{ 
display:none; 
} 

2番目に表示する画像。

.show_image{ 
position:fixed;top:0;right:0;bottom:0;left:0; 
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%; 
z-index:100; 
background-size: 5ex; 
} 

そして、あなたのHTMLコードは

<div class="show_image"></div> 
<div class="hidden box"> Your actual content </div> 

最初はあなたのコンテンツは状態とロード画像が表示されます表示されなくなりますでしょう。

ページの読み込みが完了すると、非表示のクラスが切り替わります。

$('.box').removeClass("hidden"); 
$('.show_image').addClass("hidden"); 

コンテンツが表示され、読み込み中の画像が非表示になるようにします。

ページの読み込みに関するヘルプが必要な場合はお知らせください。