I looked up for this in jQuery's Official site, it says:
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.
So what's the meaning of "DOM is ready"?
What's the MOST DIFFERENCE between "window's ready"? And how do you understand this:
this event does not get triggered until all assets such as images have been completely received.
As for the jquery $(document).ready and window.onload event, there are already many existing discussions on internet. Here are some references I've picked which explains the key difference:
as my understanding, the main difference is that $(document).ready will fire only when the main page (htm or aspx or ...)'s content is downloaded and its HTML structure/model (DOM) has been built up. While the $(window).load (actually is just the window.onload
event) will fire when the main page and its referenced resources are loaded (such as image, css, etc...). When you use the IE development toolbar or firebug (for firefox) to watch the network traffic of a page (when you hit browser address bar to navigate
to a page), there will have lots of HTTP requests, not only for the main page itself, but also for its referenced resources. And the different complete time of the main page's loading and other resources' loading probably determine the difference of the fire
of those two events. If your script code is just dealing with those html elements and the page structure, then the $(document).ready should be sufficient. For example, I can use $(document).ready to add code for dyanmically adding other html elements into
the page (I can even include an empty .htm page and build its UI completely via js code be called in the $(document).ready event.
Yes, but only download completes is not enough. As the reference (and other threads) mentioned, it is actually when the DOM is built. When content loaded, it is only text (html) data, the browser need to build up the document object model (hierarchy) based
on the content. And the ready is fired after the in-memory document object model (DOM) hierarchy is ready. In other wordds, at that time, you will be able to query and manipulate certain elements in the page's DOM by something like "document.getElementById"
...
But again, the exact implementation is totally depends on the jquery's implementation code (it might have different code logic depending on the target browser type). But the overall idea is the same.
As the reference (and other threads) mentioned, it is actually when the DOM is built. When content loaded, it is only text (html) data, the browser need to build up the document object model (hierarchy) based on the content. And the ready is fired after the
in-memory document object model (DOM) hierarchy is ready.
What's DOM? It's hard for me to understand and how do I know when DOM completely loaded? Can I use IE10 or IE9's tool to see?
Well, really good question and I don't think I have a very formal and official answer about what is DOM (since we usually just call it DOM or document object model and we refer to it as the html elements and objects we can access via script code).
I think the following means might help to get some ideas on the DOM ready and when the entire page (and resources) are ready.
Open IE and navigate to a complex internet page (which might contains large text, many images and other resources like flash ADs , etc...).
press "F12" to launch the IE developers toolbar
Then, click the "HTML" tab, it uses a tree view to displays the page's DOM structure. And whenever you refresh or reload the page, you can find that it will display "loading" first and it takes a while for it to build the DOM tree again (but I think the
DOM ready event occurs much earlier than the tree shows because the treeview itself need much time to be constructed and presented from the underlying DOM hierarchy of the page).
And now, switch to the "Network" tab, click "start capturing" button and refresh the page again. This time, you can see all the resources (including the main page) are being requested by the browser and the network traffice view will display the loading
time (when complete) of each resource. And generally, it will take more time for all resources to get downloaded then the DOM ready time.
Anyway, you need to spend much more time playing with the browser and the certain dev tools so as to get more visualized ideas on this. Hope this helps some.
ToughMan
Participant
1490 Points
635 Posts
About jQuery's ready and load?
Jan 21, 2013 06:24 AM|LINK
Someone told me that jQuery's ready means document's ready, compared with this, jQuery's load means windows's load.
So:
1) Is what I referred above right?
2) If yes, plz give me a MOST DIFFERENCE example to prove the differences among:
i) jQuery's ready ii) jQuery's load iii) <body onload=……>
Thx again!
ToughMan
Participant
1490 Points
635 Posts
Re: About jQuery's ready and load?
Jan 21, 2013 06:27 AM|LINK
Here's me——
I looked up for this in jQuery's Official site, it says:
While JavaScript provides the
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 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.So what's the meaning of "DOM is ready"?
What's the MOST DIFFERENCE between "window's ready"? And how do you understand this:
this event does not get triggered until all assets such as images have been completely received.
Steven Cheng...
Contributor
4199 Points
548 Posts
Microsoft
Moderator
Re: About jQuery's ready and load?
Jan 22, 2013 07:07 AM|LINK
Hi ToughMan,
As for the jquery $(document).ready and window.onload event, there are already many existing discussions on internet. Here are some references I've picked which explains the key difference:
$(document).ready vs. $(window).load
http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
#jQuery $(document).ready vs. $(window).load
http://www.theextremewebdesigns.com/blog/jquery-document-ready-vs-window-load/
as my understanding, the main difference is that $(document).ready will fire only when the main page (htm or aspx or ...)'s content is downloaded and its HTML structure/model (DOM) has been built up. While the $(window).load (actually is just the window.onload event) will fire when the main page and its referenced resources are loaded (such as image, css, etc...). When you use the IE development toolbar or firebug (for firefox) to watch the network traffic of a page (when you hit browser address bar to navigate to a page), there will have lots of HTTP requests, not only for the main page itself, but also for its referenced resources. And the different complete time of the main page's loading and other resources' loading probably determine the difference of the fire of those two events. If your script code is just dealing with those html elements and the page structure, then the $(document).ready should be sufficient. For example, I can use $(document).ready to add code for dyanmically adding other html elements into the page (I can even include an empty .htm page and build its UI completely via js code be called in the $(document).ready event.
Feedback to us
Microsoft One Code Framework
ToughMan
Participant
1490 Points
635 Posts
Re: About jQuery's ready and load?
Jan 22, 2013 07:26 AM|LINK
Do u mean all the Html contents downloaded and ready, not any other resources such as img's src?
Steven Cheng...
Contributor
4199 Points
548 Posts
Microsoft
Moderator
Re: About jQuery's ready and load?
Jan 22, 2013 07:33 AM|LINK
Yes, but only download completes is not enough. As the reference (and other threads) mentioned, it is actually when the DOM is built. When content loaded, it is only text (html) data, the browser need to build up the document object model (hierarchy) based on the content. And the ready is fired after the in-memory document object model (DOM) hierarchy is ready. In other wordds, at that time, you will be able to query and manipulate certain elements in the page's DOM by something like "document.getElementById" ...
But again, the exact implementation is totally depends on the jquery's implementation code (it might have different code logic depending on the target browser type). But the overall idea is the same.
Feedback to us
Microsoft One Code Framework
ToughMan
Participant
1490 Points
635 Posts
Re: About jQuery's ready and load?
Jan 22, 2013 07:42 AM|LINK
What's DOM? It's hard for me to understand and how do I know when DOM completely loaded? Can I use IE10 or IE9's tool to see?
Can u list some images to prove?
Thx again
Steven Cheng...
Contributor
4199 Points
548 Posts
Microsoft
Moderator
Re: About jQuery's ready and load?
Jan 22, 2013 09:31 AM|LINK
Well, really good question and I don't think I have a very formal and official answer about what is DOM (since we usually just call it DOM or document object model and we refer to it as the html elements and objects we can access via script code).
I think the following means might help to get some ideas on the DOM ready and when the entire page (and resources) are ready.
Anyway, you need to spend much more time playing with the browser and the certain dev tools so as to get more visualized ideas on this. Hope this helps some.
Feedback to us
Microsoft One Code Framework
ToughMan
Participant
1490 Points
635 Posts
Re: About jQuery's ready and load?
Jan 23, 2013 02:24 AM|LINK
Many thanks anyway!
PS: If u've got free time, plz take a look at this:
http://forums.asp.net/t/1876679.aspx/1?Why+document+load+isn+39+t+raised+