A simple indicator of loading pictures on jquery

Since fast Internet is still not available everywhere, not on all devices, the idea came up that it would be nice to refine the process of downloading images. This task is not too functional, however, design freaks, I believe, have repeatedly asked themselves the question of how easy it is to realize an indication of image loading.

After quite a long search, a very concise jquery script was found that implements this functionality, but the design left much to be desired, therefore it was decided to modify this piece of code. And this is what came of it.

To accomplish the task, we need a picture container, the picture itself, and a block indicator. During loading, the loader block masks the picture and shows the loading indicator in the center. After loading the picture, the block disappears. The script works great when applied to many pictures on one page.

UPD: The code is changed taking into account the discussion and valuable contributions of commentators

HTML

jQuery

$(function() {
	if(navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i)) {
		$('.loading').hide();
	}
	$('.image').load(function() {
		$(this).parent().find(".loading").hide();
	});
});

CSS

body {
    background: #333;
}
.container {
    position: relative;
    margin: 20px auto;
    width: 300px;
    height: 200px;
    border: 5px solid #FFF;
}
.loading {
	position: absolute;
	display: block;
	background: #555 url('http://katushka.in.ua/templates/katushka2/images/ajax-loader.gif') center center no-repeat;
	opacity: 0.7;
	width: 100%;
	height: 100%;
}
.image {
    width: 300px;
    height: 200px;
}

See an example on jsFiddle.

The pictures in the example are wider than 4000 pixels wide, so if you have a channel that is not too fast, I suppose you noticed these beauties.

Notes

• The example uses an animated GIF as a loading indicator. You can generate a similar service preloaders.net .
• Pure CSS: cssload.net and JS: spin.js indicators can be used .
• Chrome extension for quick cache cleaning: Clear Cache .
• The code does not work in IE7. It may not work in later versions - there was no way to check.
• Some ASUS routers (for example, RT-N16) with fresh native firmware have a speed limit function, which will help in debugging.