Menu
I'm working on a site which contains a whole bunch of mp3s and images, and I'd like to display a loading gif while all the content loads.
I have no idea how to achieve this, but I do have the animated gif I want to use.
Any suggestions?
505
Using Code Step 1: Add loader DIV tag inside body tag. This DIV helps to display the message. Step 2: Add following CSS how it is going to displaying in browser. Step 3: Add following jQuery code when to fadeout loading image when page loads.
You can access the Data Loading Status window from the Task menu, select Foundation Data > Data Loading > Review Status. The Data Loading Status window appears.
Typically sites that do this by loading content via ajax and listening to the readystatechanged event to update the DOM with a loading GIF or the content.
How are you currently loading your content?
The code would be similar to this:
function load(url) { // display loading image here... document.getElementById('loadingImg').visible = true; // request your data... var req = new XMLHttpRequest(); req.open("POST", url, true); req.onreadystatechange = function () { if (req.readyState == 4 && req.status == 200) { // content is loaded...hide the gif and display the content... if (req.responseText) { document.getElementById('content').innerHTML = req.responseText; document.getElementById('loadingImg').visible = false; } } }; request.send(vars); } There are plenty of 3rd party javascript libraries that may make your life easier, but the above is really all you need.
200
You said you didn't want to do this in AJAX. While AJAX is great for this, there is a way to show one DIV while waiting for the entire <body> to load. It goes something like this:
<html> <head> <style media="screen" type="text/css"> .layer1_class { position: absolute; z-index: 1; top: 100px; left: 0px; visibility: visible; } .layer2_class { position: absolute; z-index: 2; top: 10px; left: 10px; visibility: hidden } </style> <script> function downLoad(){ if (document.all){ document.all["layer1"].style.visibility="hidden"; document.all["layer2"].style.visibility="visible"; } else if (document.getElementById){ node = document.getElementById("layer1").style.visibility='hidden'; node = document.getElementById("layer2").style.visibility='visible'; } } </script> </head> <body onload="downLoad()"> <div id="layer1" class="layer1_class"> <table width="100%"> <tr> <td align="center"><strong><em>Please wait while this page is loading...</em></strong></p></td> </tr> </table> </div> <div id="layer2" class="layer2_class"> <script type="text/javascript"> alert('Just holding things up here. While you are reading this, the body of the page is not loading and the onload event is being delayed'); </script> Final content. </div> </body> </html> The onload event won't fire until all of the page has loaded. So the layer2 <DIV> won't be displayed until the page has finished loading, after which onload will fire.
33
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
