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.
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
Hide an element right away (or another style operation)
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.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.