SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why "window.onload" is Bad?

    What is the reason for using window.onload considered bad behaivour?

    What I want to do is simply; to load a function that adds onclick event functions to some elements in the page, after the page loads.

    Quote Originally Posted by apinomus View Post
    window.onload is bad behavior. You should much rather use a DOMready script equivilant like using the Prototype javascript library and doing...
    Code:
    Event.observe(window, 'load', {
        liveSearchInit();
        document['startpointform']['street'].focus();
        clearAllCheckboxes();
        loadMap();
    });
    http://www.sitepoint.com/forums/show...ht=body.onload
    Tweep List adds an avatar menu to Twitter (open source) ---------- Word Stats shows your most used words on Twitter

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    window.onload waits until the whole page has finished loading. This includes waiting for scripts, images, everything.

    When there are multiple scripts running window.onload can cause issues too, because it can be used to load only one function, which can make integration of multiple scripts a rather tricky process.

    A best practice to resolve these problems is to runs scripts from the end of the body instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, thanks Paul. Then it is guaranteed we can access any element in the DOM, when we run our script just before the </body> tag, is it right?

    By the way what is the point of apinomus, considering it bad and suggesting another method (qouted above)? Just curious...
    Tweep List adds an avatar menu to Twitter (open source) ---------- Word Stats shows your most used words on Twitter

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    I suspect that it relates to managing multiple scripts that all want to start at the same time.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Mentor NightStalker-DNS's Avatar
    Join Date
    Jul 2004
    Location
    Cape Town, South Africa
    Posts
    2,869
    Mentioned
    38 Post(s)
    Tagged
    0 Thread(s)
    And also the method above is unobtrusive. No need to other tags or anything in the html

  6. #6
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And also the method above is unobtrusive. No need to other tags or anything in the html
    True, I'm using it now. How did I miss that while I already have the Google Analytics script right there in front of my eyes
    Tweep List adds an avatar menu to Twitter (open source) ---------- Word Stats shows your most used words on Twitter

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    All the different variants being discussed in this thread are unobtrusive.
    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
    SitePoint Enthusiast Mr Moo's Avatar
    Join Date
    Oct 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by glenngould View Post
    What is the reason for using window.onload considered bad behaivour?

    What I want to do is simply; to load a function that adds onclick event functions to some elements in the page, after the page loads.
    As an aside, the quoted Prototype method is still a window.onload, just using Prototype's x-browser event registration, but it will still wait for everything to finish loading. Prototype's dom loaded event is accessed like this:
    Code:
    document.observe("dom:loaded", function() {
      //Do stuff - the dom is loaded and you can access any element
    });
    Not one shred of evidence supports the notion that life is serious.
    eternal.co.za - code, thoughts, rants and raves
    f1rivals.net - formula 1 forums, and, hopefully, soon, prediction game

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mr Moo View Post
    As an aside, the quoted Prototype method is still a window.onload, just using Prototype's x-browser event registration, but it will still wait for everything to finish loading. Prototype's dom loaded event is accessed like this:
    Code:
    document.observe("dom:loaded", function() {
      //Do stuff - the dom is loaded and you can access any element
    });
    Even this "dom:loaded" event will fallback on window.onload for older browsers.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  10. #10
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    A best practice to resolve these problems is to runs scripts from the end of the body instead.
    This is what I do...and what the Yahoo! bunch recommend in thier good practice docs...although i've read that this is not always successful.

    Problem is with window.onload is that it waits for all the content in the doc to load before firing. In the event of a page with lots of large images your js will not run until they've all loaded. Firefox already has a domloaded function built in:
    Code JavaScript:
    if (document.addEventListener) {
      document.addEventListener("DOMContentLoaded", init, false);
    }


    but IE does not....Dean Edwards has written a workaround for this here:

    http://dean.edwards.name/weblog/2005/09/busted/

  11. #11
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sometimes though, it is necessary to wait for the window.onload event, specifically if your scripts needs access to certain properties of the window object and/or image/object dimensions on on the page.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  12. #12
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah agreed. Window.onload is my personal preference....well in some form anyways. I've always something like this:

    http://www.scottandrew.com/weblog/articles/cbs-events

    but lately i've been doing what Yahoo suggest and putting calls to scripts at the bottom of the doc, just before the closing body tag

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,608
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JimmyP View Post
    if your scripts needs access to .... image/object dimensions on on the page.
    That's one of the reasons why it is generally recommended to include those sizes in the HTML - so it doesn't have to wait until they are loaded to know how big a space they take up.
    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="^$">

  14. #14
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It also stops the elements from juddering all over the page as progressive elements get added to the page and the images get downloaded and added. If the browser reserves the space from the outset, placing the image in that space will not affect any nearby elements' positions. Just a visual thing, but the difference can be considerable as you watch a page with lots of images on it load.


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
  •