Forums

kolins

Hi, is there a way to make a page to wait for a javascript to finish first before displaying page contents? Or to disable mouse clicks until javacripts finishes loading?

AshtonSanders

hmmm... are you loading the javascript file first (ie in your <head>)? I have had bad luck trying to get things to wait for javascript. =/

kolins

Yes, it's in the <head>. My goal is to prevent visitors from doing anything on the page until the javascript is done.

AshtonSanders

How long does it take the Javascript to run?

I would say, people don't like being "Unable to do anything" ever, so it'll be pretty tough to accomplish.

Hugo

Isn't this the same idea as the 'loading page' topic earlier this month? Like some sort of HTML/CSS-absolute positioned overlay to be displayed first, and eventually removing it with javascript (which will be the very last action javascript performs, hence: js is finished).

Stack

Unless you have some 5000+ line script or a buttload of intervals or timeouts your script already does run before the page content is loaded. provided the script is in the head at least.

kolins

Yes, something like putting a transparent overlay, then automatically removing it in the end. How do you do that? Sorry, but i can't find the post. :D

Stack

just put a absolutely positioned div at the top of the page (below head but above all content) and give it a width and height of the full page so it covers everything then give it a high z-index. then at the very end of your script select that div and give it a display: none property

AshtonSanders

Right, you could do something like this:

#loadingscreen {
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   z-index:30;
   background: #fff url('loadingimg.gif') center center;
}

Make sure to have a loading image so people don't get totally pissed about the white screen.

treehouse : what would you like to learn today?

Forums

How to display page content after javascript finishes.