1

A question/clarification regarding Javascript/jQuery execution and it's sequence.

Please excuse me if I seem to answer my own question here, but I feel I'm missing a key something in this process.

I was told my selectors weren't taking because the DOM wasn't ready which had brought this question. Script was initially in the head using the ready jQuery ready method.

Thanks everyone.

Problem:

  1. No access to Drupal template files.
  2. Can only add in the head.
  3. Appending via jQuery isn't too useful with the script tag.
  4. Our solution currently is linking to the file in the markup.
  5. I'm really seeking clarification though to the process here.

Context:

(Sorry bout that)... Element wasn't targeted by my selector, from the script in the head. Syntax was correct, as it targeted the HTML tag without issue.

My understanding was the ready method/resulting listener would trigger after the DOM was fully constructed.

What I believe I already know:

  1. I know scripts should ideally be placed just above the closing body tag in the markup.

  2. I know that when the tokenizer encounters a script tag, it stops everything and executes the script (unless defer/async).

  3. I know this is why they should ideally be placed above the closing body tag so the DOM is ready.

  4. I know that the jQuery ready method attaches a listener, when the browser is switched to it's ready state after the DOM has been loaded, it fires.

The Questions:

  1. Given all of this, placement in the head renders the ready method useless as its being executed right away because of the tokenizer?

  2. Is this really just to avoid colliding/overwriting multiple window.onloads? (Should've clarified.)

Improve this question
1
  • Your question is well-formatted, but it's lacking context. It would help if you'd give some background on how this theory affects your application. What are you trying to do/do better? Commented Nov 1, 2013 at 14:51

2 Answers 2

Reset to default
1

Given all of this, placement in the head renders the ready method useless as its being executed right away because of the tokenizer?

Wrong. The ready() method gets called only when the DOM has fully loaded, all ready() does is that it establishes a listener that waits for the DOM to load so that statements inside the ready() method get executed when the DOM is ready to be manipulated, in other words it adds a listener to the loaded event that gets called and executed only when the document has full loaded.

Is this really just to avoid colliding/overwriting multiple onloads?

What do you really mean by "colliding/overwriting" ? You can have several listeners listening to the same events in JavaScript, and they won't overwrite or collide with each other.

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

4 Comments

Hi Sniffer. Thanks for the reply. I guess my confusion here is if it's executed only when the DOM has fully loaded, why would jQuery selectors not work if loaded in the head? The developers I work with had mentioned this to me, but I was seeking some clarification. I know the syntax was correct as my selectors were working on the HTML tag, but not anything loaded in the content region.
@Joe If you put jQuery selectors inside the ready() method, they would work OK.
Thanks again Sniffer. I'm going to chalk it up to a larger issue then that I'm unaware of on the site. It's a bit messy to begin with so it can cause alot of frustration at times. I've had more success than not with the things I've built, but sometimes I get a curveball.
@Joe You are welcome. Google for JavaScript execution model for more information on the subject.
1

From your question:

I know that the jQuery ready method waits until the browser is switched to it's ready state after the DOM has been loaded.

Well, sort of. The jQuery ready method doesn't wait. It attaches an event listener. The function is attached, but not executed. The function is only executed when the DOM is ready; the rest of the page continues loading.

You're really in the sphere of micro-optimisation here. Yes, placing script elements at the end of the body is ideal, but it will make minimal difference in reality, unless you have a huge, complex and time-consuming script.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.