Whic spec define the ready event? - javascript

First at all, I want know the difference between the $(document).ready and the $(window).load, then I know this.
But, I have some new questions.what is the ready event, what is the detail. what is the load event.
I have find the description of load event in the HTML spec.
But I can't find the description of the ready event.

ready() is an abstraction implemented by jQuery based on DOMContentLoaded.
load() (Note this jQuery method is depreciated) is based on window.onload.
The MDN articles link to the specification.

In JavaScript window is one of core object and defines several useful events e.g. onload, before jQuery comes, if want to execute any code, once DOM is loaded completely, we use window.onload event
There is a problem with window.onload , it not exactly executed when DOM is loaded but it executes after all content including big images are loaded completely. Browser normally delay executing onload code, until all page content is loaded, because of this user can see significant delay between they first see the page and the time that code inside onload get executed, this delay is particularly notable, if your page content heavy images, flash videos or other heavy content with low bandwidth internet connection.
jQuery solves this problem by introducing ready event, you might have seen code like below in several JavaScript files or HTML pages :
$(document).ready(function(){
alert("Inside jQuery ready method");
});
here $() is a shortcut for jQuery() function, and we wrap document object into jQuery object to use ready() method. We are passing an anonymous function to ready() method, which will be executed once DOM is loaded. It doesn't wait till all DOM content available e.g. images. By the way, instead of using $(document).ready() function, you can also use following short-cut, which has same effect :
$(function() {
alert("shortcut for document.ready method in jQuery");
});
Apart from faster execution, one of the key advantage of jQuery ready method over JavaScript window onload event is that, you can use them multiple times in your page, unlike onload event, which can only be bind to a single function. Browser will ensure to execute all document.ready code to execute in the order, they are specified in the HTML page.
Hope this will be useful for you.
Thanks

Related

jQuery onLoad x jQuery onDomready

Every time I use jsFiddle I see two options to initialize the contents via jQuery: onLoad or onDomReady.
I Tested with most of the scripts I wrote and there was no functional difference. Searching on Google I saw that one of the main differences is that via onLoad, scripts will only start running after all the elements are loaded and that includes CSS external files, JS external files, images and etc., which can be useful if you need to load JS files in a certain order, but at any given moment one of these files makes reference to another who has not been loaded yet, while via onDomReady once the HTML page content is loaded, scripts begin to be loaded already without necessarily others have been.
Got this difference right? Is there any other differences to be studied and perceived?
Making comment as answer:
One major difference, jquery ready 'pseudo' event will be fired even handler
is set after DOM is effectively 'ready', jquery using internally a
promise. Window onload event won't be fired if handler is set after
window is loaded. e.g: http://jsfiddle.net/c58a6/
It should be then noted that there is no in-build equivalent of jQuery document ready event. For example, DOMContentLoaded in-build event won't be fired if settled after the DOM is ready.

Javascript and jQuery Execution/Sequence

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:
No access to Drupal template files.
Can only add in the head.
Appending via jQuery isn't too useful with the script tag.
Our solution currently is linking to the file in the markup.
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:
I know scripts should ideally be placed just above the closing body tag in the markup.
I know that when the tokenizer encounters a script tag, it stops everything and executes the script (unless defer/async).
I know this is why they should ideally be placed above the closing body tag so the DOM is ready.
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:
Given all of this, placement in the head renders the ready method useless as its being executed right away because of the tokenizer?
Is this really just to avoid colliding/overwriting multiple window.onloads? (Should've clarified.)
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.
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.

Run Javascript function when object content has been loaded

How do I run a Javascript function when the content of an <object> has been loaded? The DOMContentLoaded event fires before that, and things that rely on it like JQuery's $() likewise.
Compare this to this. The first example fails because the function is executed when the external SVG hasn't been loaded. The second example polls for the elements it wants to change and only then executes the relevant code, and succeeds.
Polling works in practice, but is there a better solution for this? Ideally there would be an event fired that I can use.
Does using the onload DomEvent work?
<object onload="changeColor()" data="circles.svg" type="image/svg+xml" id="circles"></object>
see my it here
You should use onload/ready event of jquery - http://api.jquery.com/ready/
$('#circles').ready(function(){
changeColor();
});`

jQuery load external JavaScript with $(document).ready fails

I would like to load an external HTML. In addition, the external HTML contains some JavaScript code. Since the load function does not load this script, I have to use getScript:
<div id="external-content"></div>
<script type="text/javascript">
$("#external-content").load("external.html #myid", function() {
// do something
});
$.getScript("external.js");
</script>
That works like a charm unless the external.js has a $(document).ready command, which tries to access elements from external.html. It seems to me, that the event is fired too early. I also tried to put the command $.getScript("external.js"); into the .load callback, but did not succeed. Note that sing external.html separately and including the external.js directly works like expected.
Unfortunately, the timing of this makes sense (ie. this is correct behaviour). The script inside the tag fires up a retrieval of external.html and does not wait for it to return, it keeps moving on to the retrieval of external.js. In the meantime, the 'base' document is still loading and may (in fact probably) will complete before externa.html is retrieved.
So, you can run into a timing situation whereby:
Document is indeed ready (external.html being loaded is not a condition of the DOM being scriptable), external.js is loaded and available, but external.html hasn't been fully loaded yet. The document ready function will fire (because the document IS ready!) before the elements of external.html are present.
If you want to continue this approach, there are probably ways to rejig it such that you are using on() inside external.js to delegate to a listener to the base document (#myid) for events on elements inside external.html.

Popup on complete load of HTML page

Here it is the situation....
I have designed a demo which is made up of HTML in which there are several images and we have made it such a way that it works offline also for ipad using manifest file.
so so once the project/demo is loaded one can use it off line and book mark it so that he can use it any time he wants.
here is the link for reference:
http://iwdfvm2730.wdf.sap.corp:1079/speeddemo/dpr921/
I need help from you guys to show a popup/loader icon when the data or every thing is loaded completely.
thanks,
Kunal
What you gave us looks like an internal corporate address, but unless you dynamically load resources, I'd suggest that you set up an onload handler: <body onload="pageLoaded()">.
You can have a look at the jQuery .load() function. Excerpt from the documentation page on the .ready() function:
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
So, in essence, the .ready() function executes after loading the DOM, while the .load() function executes after all page assets (including script, CSS and image references) have loaded.

Categories