【jQuery】画像のロードが終わったら関数実行

reference: http://stackoverflow.com/questions/4857896/jquery-callback-after-all-images-in-dom-are-loaded

by tea4two

HTML

<ul>
    <li><a href="#"><img src="http://placekitten.com/200/100" alt="" /></a>

    </li>
    <li><a href="#"><img src="http://placekitten.com/g/100/100" alt="" /></a>

    </li>
    <li id="load"><a href="#"><img src="http://placekitten.com/1200/1000" alt="" /></a>

    </li>
    <li><a href="#"><img src="http://placekitten.com/g/200/100" alt="" /></a>

    </li>
    <li><a href="#"><img src="http://placekitten.com/180/140" alt="" /></a>

    </li>
</ul>

CSS

img {
    display: none;
}

JavaScript

$('ul img').one('load', function () {
    console.log('ローデッド！');
    loader(this);
});

var loader = function (el) {
    $(el).each(function () {
        $(this).fadeIn('slow');
    });
}