JavaScript: Image Swap

The basis of this method is to swap images that are of the PNG format, and replace them with a blank GIF or 8-bit (binary transparency) PNG image. The blank image need only be 1 pixel square, as it can be stretched to fill the space needed. The original PNG image is then applied as the background to this blank image, using the AlphaImageLoader style filter.

The HTML

It's important to set the width and height of the IMG tag, either within the tag itself, or for the element through its id selector in the style sheet. This is important for two reasons. Firstly, because the blank image will be resized to fill the element so that the applied background won't be cropped. Secondly, because the style filter can only be applied to elements that have layout (e.g. declared dimensions.)

The JavaScript: out with the old, in with the new

The first stage is to swap the images:

function SwapPNG4GIF() { if (document.images) { var imgs = document.images; for (var i = 0; i < imgs.length; i++) { if (imgs[i].src.indexOf('.png') != -1) { imgs[i].src = 'blank.gif'; } } } }

All of the PNG images on the page will now be swapped with a blank image, and will be, for all intents and purposes, invisible. If there are PNG images on the page that do not need to be swapped, the function can be refined to target images based on id or class attributes, or their position within the DOM.

The next stage is to load the 24-bit PNG as the background to the image tag:

The problem with this as it stands is that the 24-bit PNG images will be shown briefly, with their grey background, as the script does the image swap.

Refinement

To get around this problem, the images are at first given no visibility on the page, by applying a suitable CSS class for example, and then made visible with an additional JavaScript function:

function ShowPNG() { var imgs = document.images; for (var i = 0; i < imgs.length; i++) { if (imgs[i].src.indexOf('blank.gif') != -1) imgs[i].style.visibility = 'visible'; } }

The ShowPNG() function is called from SwapPNG4GIF() using a timer to ensure that all images are fully loaded before being made visible, or a download detector could be used to trigger the function once relevant images are cached.

Targeting IE6 and earlier versions

This code is targeted at IE6 and below using a conditional comment:

The SwapPNG4GIF() function is then loaded through the standard JavaScript initialisation routines.

IE7 is reported to offer native support for PNG alpha transparency, so the code is hidden from this and higher versions of the browser.

Pros and cons of this method

There is a brief period during page loading during which there are no PNG images shown, then suddenly they all snap into place together. This may be seen as a disconcerting flicker.
Depending on how many images there are that need to be swapped, the delay may have to be extended for slower connections.
This method will not work if JavaScript support is disabled in the browser.
The filter used in this method was introduced in IE5.5, so the method will not work for earlier versions of the browser. However, IE4 and below do not recognise conditional comments, so will not be affected (they will still be presented with the PNG without transparency.) The problem lies with IE5.0, which will have images replaced with blanks, but will not be able to apply the original image through the style filter.