【jQuery】複数イメージをプリロード後点滅させる

参考： http://goo.gl/LRon9

HTML

<script src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js"></script>
<!--イメージプリロード用の空箱-->
<div id="invisible"></div>

<div id="blinker1"></div>
<div id="blinker2"></div>
<div id="blinker3"></div>
<div id="blinker4"></div>
<div id="blinker5"></div>

CSS

#invisible {display:none;}

JavaScript

//example: http://goo.gl/LRon9
var blinker = [
    "http://placekitten.com/50/100",
    "http://placekitten.com/80/150",
    "http://placekitten.com/160/120",
    "http://placekitten.com/90/80",
    "http://placekitten.com/240/240",
    "http://placekitten.com/240/240"
];
$(function() {
    $.each(blinker, function(i) {
        $("#invisible").append(
            $("<img />").attr("src", blinker[i])
            )
    });
});
function smBlink(){
    for(i=0;i<3;i++) {
        $("#blinker1, #blinker2, #blinker3, #blinker4, #blinker5").fadeTo('normal', 0.3).fadeTo('normal', 1.0);
    }
};

//イメージをプリロードする
//※このファンクションにはjquery.imagesloaded.min.jsが必要です。
$(function() {
    $("#invisible").imagesLoaded(function(img) {
        img.each(function(index, el) {
            $("#blinker" + (index + 1)).append(el);
        });
        smBlink();
    });
});