Скрыть один div и показать другое?

Question

У меня есть два divs по названию #loading и один по имени #main;

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

То, что я пытаюсь достичь с помощью JavaScript, показать #loading за пять секунд, а затем после того, как пять секунд скрыть #loading DIV и показать #main DIV. #main div по умолчанию скрыт, и после того, как div #loading скрыт, #main div.

Я предполагаю, что для достижения этого будет представлять собой смесь css и javascript; надеюсь, вы понимаете, чего я пытаюсь достичь, и могу помочь мне достичь того, чего я пытаюсь достичь.

Thankyou.

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>

Надеется, что это помогает

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

Personaly Я хотел бы избежать использования идентификаторов здесь, как они polute глобальных.

Вы можете сделать это красиво с помощью 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>