jQueryで画像のプリローダー
//javascript
$(function () {
$('.imgBox img').hide();
});
var i = 0;
var int=0;
$(window).bind("load", function() {
var int = setInterval("doThis(i)",500);
});
function doThis() {
var images = $('img').length;
if (i >= images) {
clearInterval(int);
}
$('img:hidden').eq(0).fadeIn(500);
i++;
}
//css
.imgBox {
background:url(./images/loading.gif) 50% 50% no-repeat;
width: 300px;
height: 226px;
display: inline-block;
}
//html
<div class="imgBox">
<img class="imgBox" src="http://lorempixel.com/500/250/nightlife/">
</div>
<div class="imgBox">
<img class="imgBox" src="http://lorempixel.com/500/250/cats/">
</div>