DOM loaded

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.

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";        
        });

Select allOpen 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

<<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.

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.

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.

Note: by 100,100 I mean Position X,Y of the image.