JS ローディング画面を表示

2021-05-15

ページやコンテンツを表示する時に、画像が多かったりすると、ページの読み込みまでに時間がかかる場合などに設置すると良いかもしれません。
ローディングのアニメーションについては、また別の機会に記載したいと思いますが、今回は、ページ表示の際にローディング画像を消す処理についての記述になります。

<div id="loading">
/* ローディングアニメーション用のdivなど */
</div>
<div id="ctn">
/* コンテンツ */
</div>

/* ローディングアニメーション用のdivなど */

</div>

/* コンテンツ */

</div>

という形で、ベースは構成し、#loadingは全画面に表示するようにしておき、
ページ読み込み完了後にローダーを非表示にするclassを付与する処理を作成していきます。

window.onload = function() {
  const spinner = document.getElementById('loading');
  spinner.classList.add('loaded');
}

window.onload = function() {

const spinner = document.getElementById('loading');

spinner.classList.add('loaded');

}

以下は、必要最低限なので、ページのカラーに合わせて、色を指定したりしてください。

#loading{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100vh;
	transition: all 1s;
}
#loading.loaded {
	opacity: 0;
	visibility: hidden;
}

#loading{

position: fixed;

top: 0;

left: 0;

z-index: 100;

width: 100%;

height: 100vh;

transition: all 1s;

}

#loading.loaded {

opacity: 0;

visibility: hidden;

}

ローディング部分用の <div> は省いているので、適宜追加したり、下記のサイトを利用したりして、配置するのをオススメします。
参考サイト 1
参考サイト 2
あとは、アニメーションにせずに、SVGなどでロゴだけを表示しておくのもありかと思います。

その２

また、ページの読み込み自体は特に問題なく、少しタイミングをズラしたい場合は、秒数を指定しておくのもありだと思います。

$(window).load(function () {
	$('#loading").delay(3000).fadeOut(1000);
});

$(window).load(function () {

$('#loading").delay(3000).fadeOut(1000);

});

ページの読み込みは問題なくとも、不具合があった場合も考慮し、下記を追記しておくと、良いかもしれません。

$(function(){
	setTimeout('stopload()',10000);
});

function stopload(){
	$('#loading').delay(3000).fadeOut(1000);
 }

$(function(){

setTimeout('stopload()',10000);

});

function stopload(){

$('#loading').delay(3000).fadeOut(1000);

}

個人的には、こちらの表記はページが問題なく読み込まれても、強制的に表示〜ローディングを消すという時間が発生するので、好きではありませんが、クライアントによっては、必ずローディング表示をしたいという場合に使っています。