Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post

    Making a script run earlier

    Is there a way to make a JavaScript run before a page is loaded instead of after it is loaded?

    Both of my parallel websites, http://www.variablehtml.com (fluid designs) and http://www.variablestyle.com (fixed width designs), have default CSS files which are changed by the VariableHTML JavaScript which is referenced in the body tag “onload” attribute. The pages seem to flash the default CSS rules before changing to the proper ones.

    Is there a way to make the script run earlier? Of course I need something that will run reliably on all browsers!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,593
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Placing the script at the bottom of the page and allowing it to run straight away rather than waiting for all the other files to load will get it running as early as it probably can (since it needs the HTML to be loaded first in order to be able to interact with it).

    If it doesn't need to interact with the lower part of the HTML then you could move the script to a higher position within the body to get it to run even earlier.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    PapaGeek (08-07-2012)

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    Thanks, I changed the code at the start of the page from:

    Code:
    <!--#extract end -->
      </head>
      <body onload="VariableHTML()">
    <!--#extract virtual="banner.inc"-->
        <div id="framework">
    To:

    Code:
    <!--#extract end -->
      </head>
    <!--#extract virtual="banner.inc"-->
        <body>
        <script type="text/javascript">
          VariableHTML();
        </script>
        <div id="framework">
    I moved the body tag inside the banner include file so that I can make other changes as necessary.

    I only did this on the VariableStyle, fixed width, templates so far. It looks like it did solve the issue.

    If others could browse to the style website and let me know if they see any delay in the proper display coming up, I’d appreciate it. Also change browser window size and browser to other pages to see if they come up immediately also.

    These pages change design based on both the width of the page and also the font size you select.
    Last edited by PapaGeek; 08-07-2012 at 01:04 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •