窗口onload选择div和淡出

Question

我目前正在使用HTML5和jQuery的用户界面。我尝试为我的应用创建一个加载屏幕，从而在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; 
} 

它显示日志消息“加载”，但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>

希望这有助于！

Answer 2

似乎有在你使用$(document).ready(myApp.init);第一行代码没有问题

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

，你肯定完全加载之前做的HTML文件中的任何改变吗？
在您的浏览器中看到控制台日志中的错误，阻止成功运行或者如果没有看到，请添加您的代码的更多细节。