javascript - 窗口加载选择div并淡出

Question

我目前正在使用 HTML5 和 jQuery 开发 UI。我尝试为我的应用制作一个加载屏幕，因此在页面完全加载后在 onload 事件中选择一个 div 并将其淡出。

我的代码是这样的:

jQuery:

$(document).ready(myApp.init);
$(window).on("load", function () {
    console.log("load");
    $("div.loadScreen").fadeOut();
});

HTML:

<div class="container">
    <form method="POST">
        ...
    </form>
</div>

<div class="loadScreen">
    <span>loading...</span>
</div>

CSS:

div.loadScreen {
  opacity:    1; 
  background: #123; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

它显示日志消息“load”，但 div 的选择不起作用。

你知道如何解决这个问题吗？

谢谢 :)

Answer 1

我删除了你的 jQuery/js 的第一行并且它起作用了:

https://codepen.io/anon/pen/yXaoER?editors=1111

$(window).on("load", function () {
    console.log("load");
    $("div.loadScreen").fadeOut();
});

div.loadScreen {
  opacity:    1; 
  background: #123; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <form method="POST">
        ...
    </form>
</div>

<div class="loadScreen">
    <span>loading...</span>
</div>

希望这对您有所帮助!