動的にimgタグで配置した画像の読み込みチェック

//画像読み込み確認
function imageChecker(){
var imgLoaded=0;
var imgTotal=0;
$('.swiper-wrapper img').each(function(){
imgTotal++;
if(0<$(this)[0].naturalHeight){
imgLoaded++;
}
});
if(imgLoaded == imgTotal){
$('.swiper-wrapper').css('opacity', 1);
}else{
setTimeout(function(){
imageChecker();
},100);
}
}

jQuery使用。

width()やheight()は、CSSで設定された値が返ってくるだけなので、naturalHeightを使う。

参考にしたサイト

https://stackoverflow.com/questions/1832907/is-there-any-way-to-read-out-the-naturalwidth-of-an-image-with-jquery