原生Javascript页面加载消息？ [英] Native Javascript page loading message?

问题描述

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

I'd like a page blocking/loading script that will overlay the entire page and display a "Loading..." message while all the assets are loading, to avoid flashes of unstyled content, etc.

我基本上想要 jQuery的BlockUI 页面阻塞方法： $ .blockUI（）; ，但我希望它在原生javascript中，所以我不必等待jQuery加载（我正在加载我的脚本 RequireJS ，所以当我的代码块执行时，我已经为我的应用程序下载了许多其他依赖项，我得到了我试图避免的那种无格式内容的闪现。）

I basically want something like jQuery's BlockUI's page blocking method: $.blockUI();, but I want it in native javascript so I don't have to wait for jQuery to load (I'm loading my scripts via RequireJS, so by the time my code block executes, I've already downloaded numerous other dependencies for my app, and I get that flash of unstyled content which I'm trying to avoid).

任何人都知道可能对我有用的本机javascript解决方案，我可以插入作为阻止（在我的RequireJS调用之前的资产加载）脚本？

Anyone know of a native javascript solution that might work for me, which I can insert as a blocking (in terms of asset loading) script before my RequireJS call?

推荐答案

你可以带一个DI你的代码V漂浮在您的网页上。

You can bring your code already with a DIV floating over your page.

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

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

This DIV can be displayed already styled to be position: absolute, width: 100% and height: 100% . This CSS can be inline, then it will be applied without any other file downloading. Or, like commented by @aroth, you can just set it DIV to display: block and your page content inside another DIV with display: none.

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

Then just hide it with a simple JavaScript at the end of your code (near </body>):

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

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

This script will be executed only after all the other elements are loaded.

最后，我将此代码此处作为样本。

这篇关于原生Javascript页面加载消息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！