The Shape of Days

Oh, I’m clever. I’m oh so clever. I’m smart and handsome and funny and clever.

Can you see me doing my happy dance?

Okay, enough with the bragging. I just figured out what I think is a pretty, well, clever solution to a problem that’s been bugging me for more than a year.

Remember this? A couple of Decembers ago, I figured out how to use JavaScript to automatically apply drop shadows to images. Like so:

Unless your browser is fairly well hosed up, or really old, that picture features a thin white matte and a subtle drop shadow. If you check out my HTML, you’ll see that there’s nothing fancy there. It’s just an img element. All the magic happens with JavaScript.

Except there’s a catch. The technique I totally pioneered involves creating an enclosing div element and setting its dimensions to the dimensions of the enclosed photo plus a fudge factor. (In my case, the fudge factor is ten pixels horizontally and fourteen pixels vertically, but that will vary depending on the images you’re using to draw your shadow.)

The catch comes in when you try to use JavaScript to access the dimensions of an image that may or may not have been loaded by the browser yet. The simple fix is clumsy: Just trigger your shadow-applying magic when the window object fires its load event. But that’s not optimal because the load event only fires after the entire page has finished loading, which means your readers will see the image pop into place without a shadow, then flash out of existence, then reappear with the shadow behind it.

Lame.

Sometimes you can get away with triggering the shadow-applying magic early, but this is basically what the computer scientists call a race condition. Will the image load before the JavaScript that depends on it executes? Maybe yes, maybe no. If the answer is yes — as it might well be if the image you’re trying to put a shadow behind was in the browser’s cache, for instance — then you’re fine. But if the answer is no, everything goes cockeyed as the shadow element appears with the wrong dimensions.

The cleverness I stumbled into involves a test. After the DOM tree is in place but before the window’s load event fires, run the shadow-applying magic. For each image to be processed, check to see if the calculated dimensions are not zero. If they’re not, everything’s fine. Proceed. But if they are zero, that means the image hasn’t finished loading yet. So set an event handler for that image’s load event, not the window’s. When the image finishes loading — which may or may not be before the page does — the necessary magic will occur and the shadow will be drawn.

If you want to see exactly how I accomplished this amazing feat, check out my JavaScript file. I’ve embraced the zen of jQuery, so if you only know classic JavaScript it might not make a lot of sense to you. But trust me, it’s pretty tight.

• This is why I use a Mac
• A public-service announcement
• Photoshop 9: This is an upgrade?