So I’m feeling optimistic.

And I should probably make this thing compatible with IE now that it’s, you know, getting lots of attention. :-/

I wonder about performance degradation with script like this, however. (I used to come across this myself, when writing various bits of JS for allowing PNGs in IE without the proprietary markup for example, rounded corners via JS etc.)

The DOM can be rather slow in varying cases as PPK (quirksmode.org) and others have shown, and performance can degrade quite quickly when elements are being inserted on-the-fly via javascript. If a significant number of these images were in a single page, I would expect it would render quite slowly. (Before/after window.onload and timing etc. is another debate.)

Obviously, the benefit of this scripted method is avoiding having extra markup within the in-page HTML itself.

What I might try alternately is creating a static “image shadow” template, which would be one instance of the image with the required shade elements wrapped around it – generated via script on-the-fly, or within the markup itself. Then this item can be cloned and the per-instance image swapped with the template image (which has the shadow etc. around it), and finally the template can be appended, replacing the original image within the page itself.

There may be less work done by the browser this way, as it would not have to create three DIVs and assign class names etc. for each image in question.

Other things can be done for optimizing DOM operations such as creating a batch of items to be appended, and then appending one parent node which contains all of the newly-created nodes – as opposed to a loop which appends 100 items directly to document.body, for example.

Pardon the rant – I think this has given me something to write about on my own site, which is rather out-of-date. ;)