使用弹出窗口锁定屏幕，直到时间页面完全加载答案

【问题标题】：Lock the screen with a popup till the time page gets loaded completely使用弹出窗口锁定屏幕，直到时间页面完全加载
【发布时间】：2017-06-11 01:44:33
【问题描述】：

我的页面需要很长时间才能加载各种控件和菜单图像。我想显示一个带有进度条的弹出窗口。显示此弹出窗口时，用户必须无法访问网络浏览器上的原始页面。

页面完全加载后，此弹出窗口必须消失。如何做到这一点？

【问题讨论】：

呃...你知道你想对你的用户做什么吗？（哼，对不起，但无法抗拒：我不会回到这样做的网站！）
如果连接到小图像失败怎么办？由于这个小图像，整个页面将无法使用。
马丁，我想我有些愚蠢。你能建议最好的方法吗？
首先，我建议优化页面的加载时间——例如，减少外部文件的数量；；更多信息，你可以看看developer.yahoo.com/performance（有很多要读，有^^）
@Martin：我正在使用一个小部件，它将 TextArea 控件替换为成熟的富文本编辑器。当这个小部件加载时，它会在 TextArea 控件的菜单上添加大量图像。如何优化它？它是第三方工具。

标签： javascript html ajax

【解决方案1】：

最简单的方法是使用叠加层——一个绝对定位的<div>，覆盖整个页面并具有高z-index。一旦您的页面完成加载（即触发loaded 事件），您就可以删除<div>。

一个用于样式目的的粗略示例：

<html>
<head>
<style type="text/css">
#loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.7; }
#loading-message { position: absolute; width: 400px; height: 100px; line-height: 100px; background-color: #fff; text-align: center; font-size: 1.2em; left: 50%; top: 50%; margin-left: -200px; margin-top: -50px; }
</style>
</head>
<body>
<div id="loading-overlay"></div>
<div id="loading-message">Loading page, please wait...</div>
<!-- rest of page -->
<p>The rest of the page goes here...</p>
</body>
</html>

请注意，控件可能有自己的“已加载”事件（例如 <img> 标记），该事件可能会在页面完全完成后触发。您必须进行试验才能确定。

【讨论】：

【解决方案2】：

这是我在我的一个自定义云应用程序中使用的自定义应用程序： NGEN Preload Screen

查看 body.onload 动作的源代码...

您可以随意使用它...

【讨论】：

【解决方案3】：

您可以拥有一个覆盖整个屏幕的 div，并在 window.load 处理程序中隐藏该元素，但我同意上面的评论。不要对你的用户那样做。

【讨论】：