dom:loaded not firing until the last <img> request is initiated. (prototype js)

Question

Hi all, I'm working on a page with 60+ images and the dom:loaded event isn't firing until the last image request is initiated (not fully loaded, which is expected). On a slower connection (using some throttler to simulate this) it is very noticable. The dom:loaded event fires something that will kick in javascript interaction on the page, which I want to be as early as possible.

This doesn't seem like expected behavior because the image tag is already rendered on the page (its in the page source). Or is it?

Answer 1

No, the <img> tag is not considered fully rendered by the browser until the image file is fully downloaded. And yes, this is documented and expected behavior.

If you want an onDomReady functionality in prototype, have a look at this script: http://www.skyrocket.be/download/prototype.domReady.js

Another alternative, and some people don't like this so I'm risking downvoting for saying this, is to put your script at the end of the document. Javascript is executed as it is encountered and the document is built the same way so a block of javascript at the end of the document means that the script can access all DOM nodes above it.

Note that having a script block in the document body is perfectly valid and correct according to HTML specs and your page will validate if you do it. In fact both Yahoo and Google recommend putting script blocks at the end of the document to improve page rendering time. Some people somehow feel it is ugly to do this. And I used to feel the same. But beauty is in the eyes of the beholder.