SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Notice: This is a discussion thread for comments about the SitePoint article, Deck the Halls with Unobtrusive JavaScript.
    __________

    Good article.

    Although: Several JS libraries include ways to start manipulating the DOM as soon as it is ready, rather than when all the media has loaded. Isn't this a better solution?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It's a toss-up.

    When scripts are loaded in the head, all loading of other elements is delayed until the script has fully arrived. The bigger the script, the longer the wait until people see anything.

    When scripts are loaded from the end of the body, the delay before something appears will be noticeably shorter.

    Sometimes you will want things to be done when the dom is ready, but before things like images have come down. Placing the script right at the end ensures that the dom is loaded and you don't need onload or onDOMLoad, because the dom will have just been loaded and be ready for anything in your script, while the other elements on the page get loaded.

    Let's hear that again. onload and onDOMLoad are not required. Scripts at the end of the document are automatically at the onDOMLoad situation.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    I prefer to place the JavaScript entirely in the head of the page coded so as to update the HTML within 1/10th second of the appropriate DOM element being available. Since I also try to keep total page sizes under 40k (80k absolute maximum) any delays caused by loading the javaScript are minimal.

    The method offered in the article looks like a practical alternative which solves several issues when you use huge JavaScript codes but at the expense of its not being quite so unobtrusive. The document.write is completely unnecessary though as that is the perfect exception for using a <noscript> tag to insert the style override in the opposite direction.
    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="^$">

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    As a blatent appeal to authority, Yahoo's Best Practices for Speeding Up You Web Site, along with detailed information about why to put scripts at the bottom, has some other useful tips and tricks that really help too.

  5. #5
    SitePoint Member Aedus's Avatar
    Join Date
    Nov 2007
    Location
    Abu Dhabi, UAE
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @felgall
    The only way to get a front loaded js function to act on DOM elements as they are loading is to use a setTimeout() for every 1/10th of a second (in your example) that then has a clearTimeout() after the function succeeds. Not a very elegant solution, and it could be resource heavy in many implementations.

    Also, when using a strict DOCTYPE, <noscript> fails validation when used in the <head> (as it is a content block), and since we are typically adding stylesheet information, we want that data in the <head>. And the argument for using the document.write in the article is to keep presentation data within the presentation layer, not to muddle it up with the content.

    @Ara
    Nice article. It is so easy to find bad javascript implementations in the wild, and its articles like this that get developers thinking about the entire pie when they start a project, instead of just their slice.

    Also, as far as validation is concerned, developers will need to escape the last ">" character in the document.write in order for the W3C page to give you the thumbs up (a slight bug in their implementation).

    HTML Code:
    <script>
      document.write('<link rel="stylesheet" type="text/css" href="loader-img-js.css"\>');
    </script>

  6. #6
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't change my code just to get it to validate because of a bug in the validator... use a different validator, or just live with the fact that the validator says no, even though it is valid.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,815
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Aedus View Post
    Also, when using a strict DOCTYPE, <noscript> fails validation when used in the <head> (as it is a content block), and since we are typically adding stylesheet information, we want that data in the <head>. And the argument for using the document.write in the article is to keep presentation data within the presentation layer, not to muddle it up with the content
    I'd forgotten about that. There is never any need to use <noscript> in the body of a web page any more so that particular usage in the head of the page would be the only time where it would be useful to be able to use it.

    Also a three line loop using timeout does not slow the loading of a reasonably sized web page significantly. It's only when you go for gigantic sized web pages that it would make a difference (say over 80k in total page size).
    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="^$">

  8. #8
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    (I finally got around to reading this.)

    Eh? <noscript> elements are not allowed in the <head> in all HTML 4.01 and XHTML 1.0 variants. The current working draft for HTML5 seems to allow that though.

    Don't browsers allow you to add elements to the <head> before the <body> has finished loading? (Perhaps I should test this...)

    @Ara Any specific reason you didn't use replaceChild() in the last example?

    Off Topic:

    Perhaps this warning should be disabled for article comment threads:
    Warning! You are replying to a thread which is more than 5 months old. Please consider creating a new thread instead.
    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.


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
  •