javascript - native Javascript 页面加载消息？

Question

我想要一个页面阻塞/加载脚本，它将覆盖整个页面并在加载所有 Assets 时显示“正在加载...”消息，以避免出现未设置样式的内容等。

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

有谁知道可能适合我的 native javascript 解决方案，我可以在调用 RequireJS 之前将其作为阻塞(在 Assets 加载方面)脚本插入？

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 .

然后只需在代码末尾(</body> 附近)使用简单的 JavaScript 将其隐藏:

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

只有在所有其他元素加载完成后，该脚本才会执行。

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