Javascript-форум - Прелоад картинок с использованием индикатора загрузки

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Прелоад картинок с использованием индикатора загрузки (https://javascript.ru/forum/misc/41195-preload-kartinok-s-ispolzovaniem-indikatora-zagruzki.html)

Прелоад картинок с использованием индикатора загрузки

Привет всем.

Решил попробовать написать прелоад картинок с индикатором загрузки(spin.js), в целях саморазвития.
Суть в том что бы, картинки подгружались в фоне, а в это время вместо картинок показывался индикатор загрузки(спиннер), и соответственно когда картинка подгрузилась, индикатор загрузки исчезал и появлялась картинка.

Но так как я нуб и только начинаю изучать js, естественно у меня ничего не получилось. Но вопрос что я сделал не так и как надо, меня мучает по сей день уже неделю. Избавьте меня от мучений и наставьте на путь истинный.
Я буду очень признателен, тем хорошим людям, которые поправят мой не удавшийся пример, дабы я мог осознать свои ошибки.
http://learn.javascript.ru/play/xRqKkc

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>