Unobtrusive CSS Loading Indicator for Images

Unobtrusive CSS Loading Indicator for Images

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

Leave a Reply

Fill in your details below or click an icon to log in:

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