Nooby,
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html id="no-js" class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html id="no-js" class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html id="no-js" class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html id="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Bootstrap blank</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script>
<!--
document.documentElement.id = "js"
//-- >
</script>
<style>
.b-example {
position: relative;
height: 280px;
background-color: #ccc;
}
.spinner {
/*margin-top: -150px;
margin-left:800px;*/
}
.img-wrap {
position: relative;
height: 280px;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<!-- .b-page -->
<div class="b-page">
<div class="img-wrap"></div>
<div class="img-wrap"></div>
</div>
<!-- end .b-page -->
<!-- spin -->
<script src="http://fgnass.github.io/spin.js/dist/spin.min.js?v=1.2.8"></script>
<script>
// source http://fgnass.github.io/spin.js/
// spin
function test() {
var canvas=document.getElementsByClassName("img-wrap");
var array_images = new Array();
array_images[0] = new Image();
array_images[1] = new Image();
for(var i=0; i<canvas.length; i++) {
array_images[i].onload = (function(x) {
var spinner = new Spinner().spin();
canvas[x].appendChild(spinner.el);
return function ()
{
alert(x);
canvas[x].appendChild(array_images[x]);
spinner.spin(false);
}
})(i)
};
array_images[0].src = 'http://upload.wikimedia.org/wikipedia/ru/9/91/Rhone_river_Castle_at_Les_Issarts_247-5_km_West_bank_001.jpg';
array_images[1].src = 'http://kolyan.net/uploads/posts/2011-10/1318201802_268.jpg';
};
test();
</script>
</body>
</html>