Simple indicator download pictures on jquery

Since fast Internet is still not available everywhere, not on all devices, the thought came that it would be nice to improve the process of downloading pictures. This task is not very functional, but design freaks, I think, have often asked themselves the question of how easy it is to implement an indication of loading a picture.

After quite a long search, a very laconic 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 that's what came of it.

To implement 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 download indicator in the center. After loading the picture, the block disappears. The script works great when applied to multiple images on one page.
')
UPD: Code changed to reflect the discussion and valuable contributions of commentators.

HTML

<!--[if IE]><style>.loading {display: none !important;}</style><![endif]--> <!--   IE --      .      IE10, IE11,       jQuery  --> <div class="container"> <!--       --> <b class="loading"></b> <!--   c  --> <img src="http://lh5.ggpht.com/-eglPTUEmd7I/UIePRUwEfvI/AAAAAAAAAEw/dkL3SmB7z7A/s9000/beautiful%2Bnature%2B2.jpg" class="image" /> <!--   --> </div> 

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 more than 4000 pixels wide, so if you have a not too bright channel, I suppose you notice these beauties.

Notes

• The example uses animated GIF as a loading indicator. You can generate a similar one using the preloaders.net service.
• The indicator can be used on pure CSS: cssload.net and JS: spin.js.
• Chrome extension for quick cache cleaning: Clear Cache .
• The code does not work in IE7. Perhaps not working in later versions - it was not possible to check.
• Some ASUS routers (for example, RT-N16) with a fresh native firmware have a speed limit function, which will help in debug.