Javascript 窗口加载选择div和淡出

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

我的编码如下所示：

jQuery:

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

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

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

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

HTML:

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

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

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

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

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

你有办法解决这个问题吗

---

谢谢：）

我删除了jQuery/js的第一行，它成功了：

$（窗口）.on（“加载”，函数（）{
控制台日志（“加载”）；
$（“div.loadScreen”）.fadeOut（）；
});
div.loadScreen{
不透明度：1；
背景：#123；
宽度：100%；
身高：100%；
z指数：10；
排名：0；
左：0；
位置：固定；
}

...
加载。。。
似乎没有问题


$（窗口）.on（“加载”，函数（）{
控制台日志（“加载”）；
$（“div.loadScreen”）.fadeOut（）；
});
div.loadScreen{
不透明度：1；
背景：#123；
宽度：100%；
身高：100%；
z指数：10；
排名：0；
左：0；
位置：固定；
}

...
加载。。。
对我来说很有效。您的项目代码中确实没有输入错误？您所说的“但是div的选择不起作用”是什么意思？