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>

希望这有帮助！

Answer 2

似乎没有问题

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

在您使用$(document).ready(myApp.init);的第一行代码中，您确定在加载之前是否完全对html文件进行了任何更改？
在浏览器中，请参阅控制台日志以查找阻止成功运行或未查看的错误，添加有关代码的更多详细信息。

window onload选择div并淡出

2 个答案: