SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2006
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    controlling when javascript is executed during page load

    Hello,

    I have some javascript that alters some css properties of a web page. Is there a way to control when the javascript executes so that it seamlessly changes the css properties as the regular css is loading? Currently, I am triggering the javascript with body onload. But the problem with this is that first the page displays the default css state before suddenly switching to the javascript-altered css display. I don't want the viewer to see the default css in cases where the javascript alters it.

    Is there a way to accomplish this?

    Thanks for your suggestions.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Place the script at the bottom of the body, just before the </body> tag. Then it will run immediately as soon as the elements become available, and will be a whole lot faster than any onload techniques.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You will unfortunately get the same effect though. No matter what trick you use (script tag in the end of the page, using the defer attribute on the script tag for IE, the DOMContentReady event etc).

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    If you set up a loop using setTimeout to constantly test for when theappropriate tag in the page has loaded you could reduce the time between it loading and being updated to as few milliseconds as you set the loop to run the test but the more frequently you run the test the slower the page would load.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Isn't the issue that we want the script to run when the stylesheet finishes loading, but we can't tell when that is?

    Perhaps the best way to approximate it would be to use a DOMReady (e.g. DOMContentLoaded) function to call a function that would check if the stylesheet(s) had loaded and if not call itself via setTimeout(). I seem to remember that you can tell if a stylesheet has finished loading via document.styleSheets[0].rules.length or document.styleSheets[0].cssRules.length, depending on the browser, of course.

    Off Topic:

    Hello Stephen and Pepejeria.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    Isn't the issue that we want the script to run when the stylesheet finishes loading, but we can't tell when that is?
    Problem is that this is already to late. You will see the old styled page for a millisecond. Try to inject CSS to any page using whatever technique and you will see this effect.
    Quote Originally Posted by Kravvitz View Post
    Off Topic:

    Hello Stephen and Pepejeria.
    Hola!

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Robert Nyman's article How to hide and show initial content, depending on whether JavaScript support is available may be of interest to you.

    It essentially deals with this very problem.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

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