RKh*_*RKh 5 html javascript ajax
我的页面需要很长时间才能加载各种控件和菜单图像.我想显示一个带有进度条的弹出窗口.当显示此弹出窗口时,用户必须无法访问Web浏览器上的原始页面.
页面完全加载后,此弹出窗口必须消失.这该怎么做？
最简单的方法是使用叠加层 - 绝对定位<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>标记),这可能会在页面完成后触发.你必须尝试确定.