Code Prostitute

Transparent PNG images fail to be transparent in IE without some help. Bob Osola (bobosola@gmail.com) has concocted a superb solution on his site (http://homepage.ntlworld.com/bobosola) using javascript. He goes into sufficient depth to address the issue on his site.

A colleague implemented this in a site recently and found that it was failing. It was on a Rails site. Any framework (or website) that implements a caching string identifier on a resource the way Rails does will find that this PNG fix fails because of the condition it uses to look for PNG files.

Specifically, an image tag might reference a source this way:

<img src="/images/transparent.png?1188293953" />

This is called cache busting. Essentially, it involves preventing browsers or proxy servers from serving content from their cache, in order to force the browser or proxy server to fetch a fresh copy for each user request. Cache busting is used to provide a more accurate count of the number of requests from users.

The problem with this is Bob’s PNG fix conditionally identifies PNG’s by whether the name of a file (the value of “src”) as ending with “PNG.” The example listed above, obviously does not qualify.

if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

My copy here employs this change:

if (imgName.match(/\.PNG/))

… reg ex matching in the string. Easy, fix… much ado about nothing, but I wanted to document this for my team.