[jQuery]bg画像の読込が終わってから実行

HTML

<ul id="slides">
    <li id="slides1"><p><a href="#"><img src="http://placekitten.com/g/200/100" alt=""></a></p></li>
    <li id="slides2"><p><a href="#">No.2</a></p></li>
    <li id="slides3"><p><a href="#">No.3</a></p></li>
    <li id="slides4"><p><a href="#">No.4</a></p></li>
    <li id="slides5"><p><a href="#">No.5</a></p></li>
</ul>

CSS

#slides,
#slides li {
    width: 300px;
    height: 250px;
}
#slides {
    display: none;
}
#slides li {
    width: 300px;
    height: 250px;
    position: relative;
}
#slides1 { background-image: url(http://dummyimage.com/640x400/0f0/fff.png); }
#slides2 { background-image: url(http://dummyimage.com/620x480/f00/fff.png); }
#slides3 { background-image: url(http://placekitten.com/g/860/400); }
#slides4 { background-image: url(http://dummyimage.com/550x450/00f/fff.png); }
#slides5 { background-image: url(http://placekitten.com/840/380); }
p {
    position: absolute;
    top: 0;
    left: 20px;
    padding: 0;
    margin: 0;
}
a {
    display: block;
    background: #f00;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 140%;
    color: #fff;
}

JavaScript

//reference
//http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached

var _imgCounter = 0,
    _parent = $('#slides'),
    _child = $('#slides li'),
    _childL = _child.length,
    _imgURLArr = [],
    _imgURL,
    _dummyImg;

_child.each(function() {
    _imgURL = $(this).css('background-image');
    _imgURL = _imgURL.substring(4, _imgURL.length - 1);//omit 'url()'
    _imgURLArr.push(_imgURL);
    console.log(_imgURL);
});

console.log(_imgURLArr.length);

$.each(_imgURLArr, function(i,val) {
    var _tempImg = $('<img/>').attr('src',val);
    _tempImg.one('load', function() {
        console.log(val + ' is loaded!');
        _imgCounter++;
        console.log('counter is ' + _imgCounter);
        if(_imgCounter == _childL) {
            _parent.fadeIn('fast');
        }
    });
    if(_tempImg.complete) {
        _tempImg.trigger('load');
    }
});