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.
© 2006 - 2025 Martin Ivanov