Example 1: Loading a Large Image

Westie

In this example, a large image (285kb) is being loaded. Unless you have a lightning-fast connection, you should see the loading image behind the image, and see it disappear as the proper image is loaded.



Example 2: Image Not Found

alternate text for this image

In this example, there is no large.jpg file to be found. This results in a continuous loading icon, as well as the alternate tag text being displayed. To make the original image area more obvious, we added a light border.



Example 3: Display Image With Included Class (no DIV)

alternate text for this image

In this example, the .load class has been applied directly to the image, bypassing the need for a surrounding div. If you have multiple images that you would like to apply this effect to and you are absolutely sure that the image you have will load, then this is probably the cleanest method. Note that since the div surrounding the image is removed, the image is no longer centered. The reason for this is that the image itself will not adhere to a "margin:0 auto;" or "text-align:center;" declaration.



Example 4: Display Image With Included Class (no DIV): Image Not Found

alternate text for this image

In this example, the .load class has been applied directly to the image, bypassing the need for a surrounding div, but there is no large.jpg file to be found. This results in a cut off and displaced continuous loading icon in Firefox (since the div is no longer defining the width and height of the image area), as well as the alternate tag text being displayed. To make the original image area more obvious, we added a light border.


no image found in Firefox

To see how we accomplished everything, view our source code!
Note that Safari users will need to press option + command + u to view source, while Internet Explorer 7 users will need to select "View," "Source" in the toolbar.