原生Javascript页面加载消息？

Question

我想要一个页面阻止/加载脚本，它将覆盖整个页面并在加载所有资源时显示“正在加载...”消息，以避免闪烁无格式内容等。

我基本上想要jQuery's BlockUI的页面阻止方法：$.blockUI();，但我希望它在原生javascript中，所以我不必等待jQuery加载（我正在加载我的脚本通过RequireJS，所以当我的代码块执行时，我已经为我的应用程序下载了许多其他依赖项，并且我得到了一些我想避免的无格式内容。

任何人都知道可能适用于我的原生javascript解决方案，我可以在我的RequireJS调用之前插入阻止（就资产加载而言）脚本吗？

Answer 1

您可以使用DIV浮动您的代码。

<div id="loading">
    Loading! Please calm down guy...
<div>

此DIV可以显示为已设置为position: absolute，width: 100%和height: 100%。这个CSS可以是内联的，然后在没有任何其他文件下载的情况下应用它。或者，就像@aroth评论一样，您可以将DIV设置为display: block，将您的网页内容设置为另一个DIV display: none。

然后只需在代码末尾使用简单的JavaScript隐藏它（</body>附近）：

<script type="text/javascript">
    document.getElementById("loading").style.display = "none";
    document.getElementById("content").style.display = "block";
</script>

只有在加载了所有其他元素后才会执行此脚本。

最后，我把这段代码here as sample。

Answer 2

我的建议是使用HTML和CSS在中间设置一个带加载消息的掩码。然后让javascript在页面完全加载后删除掩码并加载消息。