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

by opherv

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;
var _parent = $('#slides');
var _child = $('#slides li');
var _childL = _child.length;
var _imgURLArr = [];
var _imgURL;
var _dummyImg;

_child.each(function() {
    _imgURL = $(this).css('background-image');
    _imgURL = _imgURL.substring(4, _imgURL.length - 1);//omit 'url()'
    _imgURLArr.push(_imgURL.replace(/"+/g,""));    
});
console.log(_imgURLArr.length);
$.each(_imgURLArr, function(i,val) {
    var _tempImg = $('<img/>').attr('src',val);
    console.log(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');
    }
});