【jQuery】ローダーがフェードアウトしてくれない時のTips

公開日:2019年11月29日 2021年9月24日更新

Categoryweb制作

これはTipsというよりも、忘れないための備忘録。

クロスブラウザ対応だったり、レガシーブラウザも一応見ておこうということで、久しくjQuery1系で制作をしていたが、押し寄せる技術の波と、制作する側としてBootstrap等のテンプレート使った方がマルチデバイス対応も速かったりするので、ようやく重い腰を上げて、Bootstrap 4をいじってみた。

Bootstrap 3系は以前にいじったことがあるが、4系になると、jQueryの3系が必須になってたようで、今まで好んで使っていたhtmlローダーが動かなかった。

何故だ…

jQuery1系以降で廃止になった内容が多々ある

結果から言うと、3系はfadeOutやfadeInが使用できなくなっていた模様。うっすら何かが廃止になったのは記憶にあったが、いまさらながら目の当たりにしたこれはちょっと恥ずかしい…

ともかく、

<div class="loader-wrapper">
	<div class="loader"></div>
</div>

みたいにローダー自体を画像なりcssなりで作って配置し、javascriptで消すという手段。これが私jQuery1系でやってた常套句。

※ローダー自体の作り方は色々出てくるのでここでは割愛。

$(function(){
	var loader = $('.loader-wrapper');
		$(window).on('load',function(){
			loader.fadeOut();
		});
	setTimeout(function(){
		loader.fadeOut();
	},5000);
});

上記だと、loader-wrapperを最長でも5秒経ったらフェードアウトさせるような記述だが、これはjQuery3系だと効かない。

まあ、もはやcss3でアニメーションだったり色々やれるので、そっちで解決した方が速い。
ということで、javascriptではスタイルシートの制御をやって、css側でフェードアウトのアニメーションを書く。

$(function() {
	$(window).on("load", function(){
		$('.loader-wrapper').addClass('fadeOut');
	});
	setTimeout(function(){
		$('.loader-wrapper').addClass('fadeOut');
	},2000);
	setTimeout(function(){
		$('.loader-wrapper').css('z-index','0');
	},3000);
});

ページを読み込んでから、loader-wrapperというクラス名の要素にfadeOutというクラスを振る。

.fadeOut {
	animation-name:fadeOut;
	animation-duration:1s;
	animation-iteration-count:1;
	animation-direction:normal;
	animation-fill-mode:forwards;
}


@keyframes 'fadeOut' {
	0% {	opacity:1;	}
	100% {	opacity:0;	}
}

cssでフェードアウトさせる。

ただ、これだとローダー以降の要素が選択・クリック不可なのでz-indexで順序も変えている。
もっとスマートな方法が見つかるまで、とりあえずの覚書。なんとなく、今後も忘れて嵌りそうなのでメモ。