Grow your CSS skills. Land your dream job.

How to display page content after javascript finishes.

  • # May 16, 2009 at 11:32 am

    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?

    # May 16, 2009 at 12:53 pm

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

    # May 16, 2009 at 7:16 pm

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

    # May 16, 2009 at 9:02 pm

    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.

    # May 17, 2009 at 9:27 am

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

    # May 17, 2009 at 9:50 am

    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.

    # May 17, 2009 at 8:37 pm

    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

    # May 18, 2009 at 12:40 am

    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

    # May 18, 2009 at 3:51 am

    Right, you could do something like this:

    Code:
    #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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".