有一个弹出式锁定屏幕,直到时间的页面被完全加载弹出式、有一个、加载、屏幕

2023-09-10 14:17:54 作者:劳资爱坏侽秂

我的页面需要相当长的一段时间来加载各种控制和菜单的图像。我想说明一个弹出窗口,上面有进度条。用户必须不能够访问在网页浏览器的原始页面时该弹出显示。

My page takes quite sometime to load a variety of controls and menu images. I want to show a popup window with progress bar on it. The user must not be able to access the original page on the web-browser when this popup is showing.

在页面完全加载,这个弹出必须消失。如何做到这一点?

When the page has loaded completely, this popup must disappear. How to do this?

推荐答案

要做到这一点是与覆盖最简单的方法 - 一个绝对定位的< D​​IV> 覆盖整个页面,并具有较高的的z-index 。一旦你的页面加载完(即加载事件触发),那么你可以删除< D​​IV>

The easiest way to do this would be with an overlay -- an absolutely-positioned <div> that covers the entire page and has a high z-index. Once your page has finished loading (i.e. the loaded event fires) then you can remove the <div>.

一个粗略的例子造型用途:

A rough example for styling purposes:

<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>

注意控制可能有自己的装事件(如&LT; IMG&GT; 标签做),这可能会发生火灾后的页面已经完全结束。你将不得不尝试是肯定的。

Be aware that controls may have their own "loaded" event (e.g. <img> tags do), which may fire after the page has completely finished. You would have to experiment to be certain.