{"id":47,"date":"2006-04-11T10:40:34","date_gmt":"2006-04-11T15:40:34","guid":{"rendered":"http:\/\/stein.everybody.org\/brain\/never-use-onload\/"},"modified":"2011-03-10T10:57:33","modified_gmt":"2011-03-10T15:57:33","slug":"never-use-onload","status":"publish","type":"post","link":"https:\/\/jeremystein.com\/brain\/never-use-onload\/","title":{"rendered":"Never use onload"},"content":{"rendered":"

Beware the body onload event. If you use it to trigger Javascript that needs to run before the user begins interacting with your site, you may be sorry. The problem is that it doesn’t fire until all the included content is also loaded (e.g. images). I’m sure it works fine for you, since you’ve already been to your site and the images are cached. But it may take a couple seconds (or longer for dial-up users) before the images load for everyone else. They’ve already started typing in the form when your Javascript fires and destroys their work.<\/p>\n

My bank<\/a> uses the body onload attribute to call Javascript that gives focus to the account number text box. However, by the time all their images load, I’m already typing my password. The focus jumps back to the account number text box and I enter half my password in clear text. This does not make me happy.<\/p>\n

To their credit, when I complained about this, they fixed it and changed their Javascript to this:<\/p>\n

\n\/\/function gives focus to box if the user hasn't\n\/\/already typed something in the box.\nfunction givefocus() {\n  if (document.Login.userNumber.value == ''\n      && document.Login.password.value == '')\n    document.Login.userNumber.focus();\n}\n<\/pre>\n
There’s another simple way to deal with this.  Simply put your Javascript at the end of the page.  For most cases, this will work just as well and will execute immediately, before loading images.<\/p>\n
\n<html>\n  <head>\n    <script language=\"javascript\">\n      function init() {\n        \/\/ Do stuff\n      }\n    <\/script>\n  <\/head>\n  <body>\n    Content here\n    ...\n    <script language=\"javascript\">\n      init();\n    <\/script>\n  <\/body>\n<\/html>\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Beware the body onload event. If you use it to trigger Javascript that needs to run before the user begins interacting with your site, you may be sorry. The problem is that it doesn’t fire until all the included content is also loaded (e.g. images). I’m sure it works fine for you, since you’ve already […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-47","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/jeremystein.com\/brain\/wp-json\/wp\/v2\/posts\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jeremystein.com\/brain\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jeremystein.com\/brain\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jeremystein.com\/brain\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jeremystein.com\/brain\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":0,"href":"https:\/\/jeremystein.com\/brain\/wp-json\/wp\/v2\/posts\/47\/revisions"}],"wp:attachment":[{"href":"https:\/\/jeremystein.com\/brain\/wp-json\/wp\/v2\/media?parent=47"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jeremystein.com\/brain\/wp-json\/wp\/v2\/categories?post=47"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jeremystein.com\/brain\/wp-json\/wp\/v2\/tags?post=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}