Unobtrusive CSS Loading Indicator for Images

A few developers are actually aware that the image tag supports background images (as well as practically any other CSS property). Here is a quick and unobtrusive technique for creating loading indicator for images without using JavaScript, that relies on the above feature.

1. Create a loading indicator. You may use http://ajaxload.info.

2. Create the markup for your gallery:

<ul class="thumbnails">
<li><img src="Images/Image_01.jpg" alt="Image 1" width="200" height="100" /></li>
<li><img src="Images/Image_02.jpg" alt="Image 2" width="200" height="100" /></li>
<li><img src="Images/Image_03.jpg" alt="Image 3" width="200" height="100" /></li>
</ul>

3. Create the CSS for the gallery and consider the property in red, where we apply the background image to the image tag:

.thumbnails,
.thumbnails li
{
padding: 0;
margin: 0;
list-style: none;
}
.thumbnails li
{
float: left;
}
.thumbnails img
{
border: solid 2px #5d6f88;
width: 200px;
height: 100px;
background: white url('Images/Loading.gif') no-repeat center;
margin: 0 2px;
}
.thumbnails img:hover
{
border-color: black;
}

 

To test the loading effect locally, remove the src attribute of the image tags, or simply set an unexisting url. The same effect will appear in online galleries that use large images – the loading image will load faster (as it is some 1-2Kb in size) and will be displayed until the actual image is fully loaded.

Advertisements

3 comments

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s