Menu
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?
775
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>
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.
151
This is a custom one I've used on one of my Custom Cloud Applications: NGEN Preload Screen
View the source for body.onload action...
Feel free to use it at your leisure...
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
