divを非表示にして別の広告を表示しますか？

Question

は#loadingと呼ばれ、1つは#mainと呼ばれます。私が達成しようとしている何

<div id="loading"></div> 
<div id="main"></div> 

は5秒#loading div要素を隠し、#mainのdivを表示し、その後後5秒間#loadingを示し、JavaScriptを使用しています。 #main divはデフォルトで非表示になっており、#loading divが非表示になると#main divが表示されます。

これを達成するには、CSSとJavaScriptが混在していると仮定しています。うまくいけば、私が達成しようとしていることを理解し、私が達成しようとしていることを達成するのを助けることができます。

ありがとうございます。

Answer 1

あなたのCSSは次のようになります。

#main { 
    display:none; 
} 

JSは次のようになります。

setTimeout(function() { 
    document.getElementById('main').style.display = 'block'; 
    document.getElementById('loading').style.display = 'none'; 
}, 5000); 

Answer 2

多分これはCSSを使用せずに、あなたを助けることができます。純粋なJqueryのみ。

$("#loading").show(); 
 
$("#main").hide(); 
 
setTimeout(function() { 
 
    $("#loading").hide(); 
 
    $("#main").show() 
 
}, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="loading">loading here..</div> 
 
<div id="main" class="hidden">This is main content</div>

Answer 3

setTimeoutを使用。

window.onload = function() { 
 
    setTimeout(function() { 
 

 
    document.getElementById("loading").style.display = "none"; 
 

 
    document.getElementById("main").style.display = "block"; 
 
    }, 5*1000); 
 
}

#main { 
 
    display: none; 
 
}

<div id="loading">loading</div> 
 
<div id="main">main</div>

これは、彼らが地球をpoluteとして

Answer 4

function loading(dur) { 
    if (window.busy) {return;} 
    document.getElementById('loading').style.display = "block"; 
    document.getElementById('main').style.display = "none"; 
    window.busy = setTimeout(function() { 
    document.getElementById('loading').style.display = "none"; 
    document.getElementById('main').style.display = "block"; 
    window.busy = 0; 
    }, dur); 
} 

loading(5000); 

Answer 5

個人的に私はここにIDを使用して回避するのに役立ちます希望。

あなたはCSSとクラスとうまくこれを行うことができます。..

var holder = document.querySelector('.holder'); 
 
setTimeout(function() { 
 
    holder.classList.remove('isloading'); 
 
}, 5000);

.loading { 
 
    display: none; 
 
} 
 
div.isloading .loading { 
 
    display: block; 
 
} 
 

 
.main { 
 
    display: none; 
 
} 
 
div:not(.isloading) .main { 
 
    display: block; 
 
}

<div class="holder isloading"> 
 
    <div class="loading">Loading</div> 
 
    <div class="main">Main</div> 
 
</div>