Question

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

当页面完全加载后，此弹出窗口必须消失。怎么做？

Answer 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>标记），这可能会在页面完成后触发。你必须做实验才能确定。

Answer 2

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

查看body.onload操作源...

随意使用它......

Answer 3

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

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

3 个答案: