JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<b class="loading"></b>
<img src="http://lh5.ggpht.com/-eglPTUEmd7I/UIePRUwEfvI/AAAAAAAAAEw/dkL3SmB7z7A/s9000/beautiful%2Bnature%2B2.jpg" class="image" />
</div>
<div class="container">
<b class="loading"></b>
<img src="http://lh5.ggpht.com/_1aizsB0-CGU/TQnkMFpXAtI/AAAAAAAAAEY/Wn6lHbJs7Tg/s9000/serene-nature-walk-trail.jpg" class="image" />
</div>
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;
}
JavaScript
$(function() {
if(navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i)) {
$('.loading').hide();
}
$('.image').load(function() {
$(this).parent().find(".loading").hide();
});
});