Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make the browser wait to display the page until it's fully loaded?

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

  1. How can I do this?
  2. I'm a total noob to web development, but is this common practice? If not, why?

Thanks in advance for your wisdom!

like image 387
BeachRunnerFred Avatar asked Sep 16 '09 19:09

BeachRunnerFred


People also ask

How do I display loading icon until page loads completely?

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.

How do you make JavaScript wait until the page is loaded?

Use the window. onload Event to Wait for the Page to Load in JavaScript.

Does DOMContentLoaded wait for scripts?

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.


1 Answers

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.

like image 57
Grant Wagner Avatar answered Oct 08 '22 15:10

Grant Wagner