I hate how you can actually see webpages load. I think it'd be much more appealing to wait until the page is fully loaded and ready to be displayed, including all scripts and images, and then have the browser display it. So I have two questions...
Thanks in advance for your wisdom!
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.
Use the window. onload Event to Wait for the Page to Load in JavaScript.
DOMContentLoaded and styles External style sheets don't affect DOM, so DOMContentLoaded does not wait for them. The reason for this is that the script may want to get coordinates and other style-dependent properties of elements, like in the example above.
This is a very bad idea for all of the reasons given, and more. That said, here's how you do it using jQuery:
<body> <div id="msg" style="font-size:largest;"> <!-- you can set whatever style you want on this --> Loading, please wait... </div> <div id="body" style="display:none;"> <!-- everything else --> </div> <script type="text/javascript"> $(document).ready(function() { $('#body').show(); $('#msg').hide(); }); </script> </body>
If the user has JavaScript disabled, they never see the page. If the page never finishes loading, they never see the page. If the page takes too long to load, they may assume something went wrong and just go elsewhere instead of *please wait...*ing.
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