html jQuery的で画像のプリローダー

Posted 2021-05-11

//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>