ローディング画面実装方法

重いデータを読み込むとローディング画面が欲しくなりますね。
ローディング画面実装の備忘録をサンプルコード付きでまとめました。

1.ページ読み込み時にはローディング画面を表示
2.全て読み込みが終了するとローディング画面を消す

サンプルコード

<div class="js-loading"></div>

.js-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	height: 100%;
	background: #fff;
}

.is-loaded .js-loading {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

let isLoading = false;
$(window).on('load', function() {
	if (isLoading==false) {
		loadingInit();
	}
});
$(function() {
	$('html').addClass('is-loading');
});
function loadingInit() {
	function loading() {
		function loadStep() {
			$('html').addClass('is-loaded');
		}
		loadStep();
	}
	loading();
}

DOMが読み込まれたタイミングでis-loadingというクラスを追加、すべて読み込みが終わるとis-loadedというクラスがつくようにしています。

しかしこのままだとブラウザによって、ページを読み込むときに一瞬のちらつきが生まれます。

解決策

body {
	opacity: 0;
	visibility: hidden;
}
.is-loading {
	body {
		opacity: 1;
		visibility: visible;
	}
}

body要素を一旦非表示にしておくことでつらつきを防げます。