窗口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文件中的任何改變嗎？
在您的瀏覽器中看到控制檯日誌中的錯誤，阻止成功運行或者如果沒有看到，請添加您的代碼的更多細節。