• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 370
  • Last Modified:

DOM loaded

Hi

I was reading an article about the jquery ready method on

http://www.learningjquery.com/2006/09/introducing-document-ready

In the first paragraph it is written that everything inside the ready method will be loaded when dom is loaded and before the page content is loaded.

My query is what is the meaning of DOM loaded and how it is different from page content loaded

Kindly advice

Regards
Karan Gupta
0
KaranGupta
Asked:
KaranGupta
  • 3
  • 3
  • 2
2 Solutions
 
jkofteCommented:
DOM stands for Document Object Model. It is basicly all the html controls in the page. Like tables, divs, images, spans and such. Their properties can be controlled by javascript.

Content is the text inside divs, images loaded in image tags and such.

Content loaded waits for the text and images to be loaded, but DOM loaded is for DOM elements inside the page.
0
 
Gurvinder Pal SinghCommented:
<< what is the meaning of DOM loaded>>
It means that whatever is HTML rendered by the browser, is completely rendered. Only after the elements in HTML are loaded, they will be ready for manipulation by javascript.

<< how it is different from page content loaded>>
DOM ready doesn't capture that images are already loaded or not. So those contents needs to be captured separately since they are the resources which are requested from the server after a particular element is loaded in the DOM.
0
 
KaranGuptaAuthor Commented:
Hi gurvinder372

I have created one image control and try to set the source of image on both ready and onload event. Please check the code below
window.onload = (function() {
            document.getElementById("imgMyImage").src = "img_src";
        });

        $(document).ready(function() {
        document.getElementById("imgMyImage").src = "img_src";        
        });

Open in new window


But it doesn't make any difference I am not getting any error. Yes but I can see that ready method fires first then onload.

But as per your comment - "DOM ready doesn't capture that images are already loaded or not." so as per you it ready should not set the image source.

Kindly advice

Regards
Karan Gupta
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Gurvinder Pal SinghCommented:
<<so as per you it ready should not set the image source.>>
why not? it can capture if the image element is loaded, so it can set the source. But when the actual image will be loaded, that is what dom ready cannot tell.


0
 
KaranGuptaAuthor Commented:
Hi gurvinder372

But if you run the code above you can see that in the ready function as well I can set the image source, even I have tried to set the width of the image and I got the success in doing that.
0
 
Gurvinder Pal SinghCommented:
Yes, thats what i am also saying.
You can do it ready event, because it means all the elements are loaded in DOM, and DOM is ready.
0
 
jkofteCommented:
Hello again KaranGupta

That's because the properties of HTML elements are part of DOM as I said above. So, you can change them as soon as the elements are loaded.

But the content of the element (like bytes of image.gif in src="image.gif") is not a part of the DOM.

This means that you can set the "src" of an image tag before the image itself in src is loaded(also width, height, href), but you cannot change the image itself in the src before load. for example if you have a script that sets the bit of the image in 100,100 to color red, you cannot do that before the image itself is loaded.
0
 
jkofteCommented:
Note: by 100,100 I mean Position X,Y of the image.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now