デモページはこちら

画像読み込みの管理ができるJavaScriptライブラリ、imagesLoaded（imagesloaded.pkgd.js）の使い方です。jQueryでの記述も可能です。CDNも提供されています。

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

以下はimagesLoadedを利用したsvgロードアニメーションの実装です。imagesLoaded(document);でサイト内の画像の読み込みを検知します。イベントは画像の読み込み完了をひとつずつ検知して実行するprogress、全ての画像の読み込み完了を検知して実行するalwaysを使用しています。

//imagesLoadedを利用したsvgロードアニメーション
var imgLoad = imagesLoaded(document);
var count = 0;
var img__length = imgLoad.images.length;
imgLoad.on('progress',function(){
	count++
	if(count <= img__length){
		var sl = Math.floor(100/img__length*count); //画像の読み込み割合（%）
		setTimeout(function(){
			//0.5秒置きにstroke-dashoffsetを500から0へ;
			$('.js-loader-circle-parts').css('stroke-dashoffset',Math.ceil(500 - sl * 5));
		},500);
	};
}).on('always',function(){
	setTimeout(function(){
		//全ての画像読み込み完了後、1.5秒後にloader_anime関数を実行
		loader_anime()
	},1500);
});