Question

我在divs上有两个#loading，其中一个名为#main;

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

我想要实现的是使用javascript，显示#loading五秒钟，然后在五秒钟后隐藏#loading div并显示#main div。默认隐藏#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。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

使用setTimeout。

＆＃13;

window.onload = function() {
  setTimeout(function() {

    document.getElementById("loading").style.display = "none";

    document.getElementById("main").style.display = "block";
  }, 5*1000);
}

＆＃13;

#main {
  display: none;
}

＆＃13;

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

＆＃13;

希望这有帮助

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我会避免在这里使用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>

隐藏一个div并显示另一个div？

5 个答案: