3

I lately saw some sites which uses this pattern : 

<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(function (){...do some stuff with plugins...}); </script> </head> <body> <script src="myplugin1.js"></script> <script src="myplugin2.js"></script> <script src="myplugin3.js"></script> </body> </html>

This made me think of some traps :

Question #1

document.ready event is raised not executed after the plugins(JS) has been parsed.

it is executed when the dom structure is done. (notice: I didn't say :"when all resources has been downloaded" !)

So there could be a situation where the document. readyfunction will try to use a plugin variable which hasn't been fully downloaded. (which will cause error).

Am I right ?

Question #2 This leads me to : "never use document.ready" before the script references location ( I mean : in situations where document.ready is dependent on those script variables).

Am I right ?

p.s. Im not talking about window.load which will obviously will work here but i'll have to wait much longer.

Improve this question
4
  • Why are you putting <script> tags outside of <body> as children of <html>? Commented Apr 12, 2013 at 5:22
  • @Ian you right, just for the question. I'll edit. Commented Apr 12, 2013 at 5:23
  • No, that's my fault. I didn't read well enough that it was just an example. Commented Apr 12, 2013 at 5:23
  • 3
    Scripts block, so they'll be loaded before the DOM is ready. Commented Apr 12, 2013 at 5:26

2 Answers 2

Reset to default
2

If you think about all the kinds of resources in a page, many can be loaded separately from the page content: images and stylesheets, for example. They may change the look of the page, but they can't really change the structure, so it's safe to load them separately.

Scripts, on the other hand, have this little thing called document.write that can throw a wrench into the works. If I have some HTML like this:

Who would <script>document.write("<em>");</script>ever</em> write like this?

Then browsers will parse it just fine; document.write, if used at the top level like that, effectively inserts HTML at that position to be parsed. That means that the whole rest of the page depends upon a script element, so the browser can't really move on with the document until that script has loaded.

Because scripts can potentially modify the HTML and change the structure, the browser can't wait to load them later: it has to load them at that moment, and it can't say the DOM is ready yet because a script might modify it. Therefore, the browser must delay the DOM ready event until all the scripts have run. This makes it safe for you to put the dependent code at the top in a ready handler.

However, I'd recommend you don't, because it's not very clear.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The event that $(document).ready equates to is DOMContentLoaded in modern browsers (and it falls back to some others in legacy browsers that equate to the same scenario).

MDN summarizes it pretty nicely:

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

So your scripts will always be parsed by the time it is executed.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.