Accessing an Element ASAP (Before document.ready) - J Query

Problem
You need to gain access to a certain DOM element as soon as possible.Using strong>document.ready isn’t fast enough; you really want to control this element before the page finishes rendering.Issues like this are especially noticeable on large pages, where the document.ready event takes longer to be reached.

Solution

This is a very common and generic problem that can be solved in many different ways.
There’s one approach that works for all of them, but it requires polling the DOM so it adds overhead to the page-rendering process (definitely undesirable!).
These are some of the usual problems where one could rely on polling:

  • Hide an element right away, before it is rendered (or another style operation)

  • Bind event handlers to an element ASAP so that it quickly becomes functional

  • Any other situation

Discussion
Hide an element right away (or another style operation)
So, your problem is directly related to styling, you want to apply a conditional styling to an element, and this condition needs to be evaluated by JavaScript.
The right way to go about this is adding a specific CSS class to an element that is quickly accessible, like the <html>element, and then style the element accordingly.
Do something like this:

Bind event handlers to an element ASAP

Very often we have this large page with interactive elements, like buttons and links.
You don’t want those elements to just hang in there, without any functionality attached while the page loads.
Luckily, there’s a great concept called event delegation that can save the day. Event delegation is easy to implement with one of several jQuery plugins, and since jQuery 1.3, a plugin is no longer needed, because it has been added to the core jQuery file.
You can now bind event handlers to elements that still don’t exist by using the method live().§ That way, you don’t need to worry about waiting for the element to be ready in order to bind the events.

Any other situation

Your problem isn’t about styling or about events. Then you, my friend, fall into the worst group.
But don’t panic! There’s a better solution than polling if you’re concerned about performance.
I’ll explain it at last.
Polling can be implemented with a simple interval (setInterval) that checks for an element, and once found, a certain function is run, and the interval needs to be cleared.
There are two plugins that can aid you with this. One is LiveQuery,‖which has an option to register a function to be run for each newly found element that matches a selector. This approach is pretty slow but supports the whole set of selectors.
There’s another plugin called ElementReady# that will also handle this situation properly.
It lets you register pairs of id/function, and it will poll the DOM. Once an id is found, the function will be called, and the id is removed from the queue.
This plugin implements, probably, the fastest approach to detect elements, that is, using document.getElementById. This plugin is pretty fast but only supports ids.
The whole document-ready concept means “after the html is parsed.” This means the browser reached the body’s closing tag, </body>.In other words, instead of using document.ready, you could simply put your scripts right before </body>.
You can apply the same principle to other parts of the DOM: you can add a <script>right after the element you want to access, and you can know, for certain, that it will be already accessible from it.
Here’s an example:

As you can see, no polling was needed in this case. This is a feasible solution if you don’t need to use it a lot or you’ll be adding tons of scripts to the page.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics