jQueryで1回だけ表示されるローディング画面実装のメモ

ローディング画面をjQueryで実装しました。

See the Pen jQueryでローディング画面実装 by hiro (@hirochanpon) on CodePen.

フックで差し込んでいます。

add_action(
	'wp_body_open',
	function() {
		?>
		<div id="loadingScreen" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#111; z-index:9999;">
  <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);">
    <img src="ロゴ画像のURL" alt="Loading" style="width:120px; height:auto;">
    <p style="text-align:center;"></p>
  </div>
</div>
		<?php
	}
);

jQuery

<script>
jQuery(function($) {
  // localStorageに「loadingShown」がなければ表示
  if (!localStorage.getItem('loadingShown')) {
    $('#loadingScreen').show();

    // 2秒後にフェードアウト
    setTimeout(function() {
      $('#loadingScreen').fadeOut(600);
    }, 2000);

    // フラグを保存して、次回以降は表示しない
    localStorage.setItem('loadingShown', 'true');
  }
});
</script>

簡易な感じですが、よろしくお願いいたします。

追記

おまけでjQueryを使わないローディング画面も作りました。

See the Pen JSでバウンドするローディング画面 by hiro (@hirochanpon) on CodePen.

Share This…