How do I fire javascript after DOM and CSS are loaded but not images?

Question

I need to fire some javascript after the DOM and CSS is loaded, but not images. I believe that's after document.ready but before window.onload. Anyone know how to achieve this?

I was thinking of loading CSS after document.ready by iterating through document.styleSheets but it feels like a bad idea.

Update: The reason for this unusual requirement is that I need to predict the size which images will be rendered, which is determined by css. Moving the javascript to the bottom of the page solves the issue, but I'd like my script to work when that's not the case too.

Answer 1

You want the DOMContentLoaded event, together with an external script linked after all of the stylesheets.

From the linked page:

if you have a <script> after a <link rel="stylesheet" ...> , the page will not finish parsing - and DOMContentLoaded will not fire - until the stylesheet is loaded.

Answer 2

You could try to use a small image and add the handler to its onload event, see image.onload event and browser cache Add your code with this small image to document.ready.

Please could you elaborate what is your use case, and why putting the code on document.ready event handler would not do the job for you?

---

Another option would be to attach handlers to onload of each of the style tags, and each of this handlers to increment some counter, which you would check at the same time if the counter = style tags count. (You could determine the count of style tags, the same time you add the event handlers). When the counter has reached the number of style tags, you could fire your custom event, that could be used to have your code run. This however would fail if some of the stylesheets fail to load for some reason, so I would suggest adding a fallback to execute the code on window.onload if the above logic fails.

Answer 3

DOMContentLoaded is the first thing that is executed.

BUT

if i place an image like this in the html. and this image is cached then the image onload executes before DOMContentLoaded .

html

<img onload="console.log('imgLoaded');" src="http://placekitten.com/16/16">

js

window.addEventListener('DOMContentLoaded',function(){
 console.log('DOMContentLoaded')
},false);

DEMO

http://jsfiddle.net/yE9qU/

output:

• DOMContentLoaded
• imgLoaded
• imgLoaded <----- wrong
• DOMContentLoaded

also putting the onload event directly on the image does not work.

http://jsfiddle.net/yE9qU/1/

output:

• 10 10
• 10 10
• 16 16 <----- wrong
• 10 10

This means that there is no way to get the right css assigned size before everything loads ... so after window.onload

Solutions...

depends on what you need.

1. if there are not to many images i would add them after executing load or DOMContentLoaded .

2. like you say putting the script at the bottom of the page. but not so sure if image is already cached.

3. a. do the math after everything has loaded (it's just some milliseconds)

4. b. hide the images until math is done.

If you explain exactly why you need the size of the images in that exact moment it's easier for us to find you a proper alternative solution.