JavaScript & jQueryで実現!ページ読み込み完了までローディング画面を表示する方法
ページ読み込み完了までローディング画面を表示する方法(JavaScript、jQuery、HTML)
ここでは、JavaScript、jQuery、HTMLを使用して、ページ読み込み完了までローディング画面を表示する方法を説明します。
HTML
まず、HTMLでローディング画面用のdiv要素を作成する必要があります。このdiv要素は、ページ読み込み中は表示され、読み込み完了後は非表示になります。
<div id="loading">
<img src="loading.gif" alt="読み込み中">
</div>
この例では、id="loading"
というdiv要素を作成し、その中にloading.gif
というローディング画像を表示しています。
CSS
次に、CSSを使用してローディング画面のスタイルを設定する必要があります。
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
#loading img {
width: 100px;
height: 100px;
}
この例では、#loading
要素を固定位置(position: fixed
)にし、画面全体を覆うように設定しています。また、背景色を半透明の黒色(rgba(0, 0, 0, 0.7)
)にし、ローディング画像を中央に配置しています。
JavaScript
$(document).ready(function() {
$(window).load(function() {
$('#loading').fadeOut();
});
});
この例では、$(window).load()
イベントを使用して、ページ読み込み完了時に$('#loading').fadeOut()
を実行しています。これにより、ローディング画面が徐々にフェードアウトし、非表示になります。
window.addEventListener('load', function() {
document.getElementById('loading').style.display = 'none';
});
オプション
上記のコードは基本的な例です。必要に応じて、以下のオプションを追加することができます。
- ローディング画面にアニメーションを追加する
- ページ読み込みの進捗状況を表示する
- 特定の要素が読み込まれるまでローディング画面を表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ローディング画面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="loading">
<img src="loading.gif" alt="読み込み中">
</div>
<div id="content">
<h1>ページタイトル</h1>
<p>本文</p>
</div>
<script src="script.js"></script>
</body>
</html>
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
#loading img {
width: 100px;
height: 100px;
}
#content {
display: none;
}
$(document).ready(function() {
$(window).load(function() {
$('#loading').fadeOut();
$('#content').fadeIn();
});
});
説明
このコードは以下の通り動作します。
- HTMLコードでは、
id="loading"
というdiv要素とid="content"
というdiv要素を作成します。 #loading
要素はローディング画面用のdiv要素で、loading.gif
というローディング画像を表示します。#content
要素はページコンテンツ用のdiv要素で、読み込み完了時には表示されます。- CSSコードでは、
#loading
要素と#content
要素のスタイルを設定します。 - JavaScriptコードでは、
$(window).load()
イベントを使用して、ページ読み込み完了時に以下の処理を実行します。$('#loading').fadeOut()
:ローディング画面をフェードアウトして非表示にします。
このサンプルコードを参考に、自分のニーズに合わせてカスタマイズすることができます。
補足
- このコードは、jQueryライブラリを使用しています。jQueryを使用していない場合は、
$(window).load()
イベントの代わりにwindow.addEventListener('load', function() { ... })
を使用する必要があります。 - ローディング画像のパス (
loading.gif
) は、自分の環境に合わせて変更する必要があります。 - ローディング画面のデザインやアニメーションは、CSSを使用して自由にカスタマイズすることができます。
ページ読み込み完了までローディング画面を表示するその他の方法
CSSローディングアニメーション
CSSのみで完結するローディングアニメーションは、シンプルで軽量な実装が可能です。
SVGを用いたローディングアニメーションは、柔軟性と表現力に優れています。
Preloader.jsやPace.jsのようなJavaScriptライブラリを使用すると、高度なローディングアニメーションを簡単に実装できます。
ローディング画面サービス
LoadUIやBarometerのようなローディング画面サービスを利用すると、コードを書かずに高品質なローディング画面を導入できます。
選択のポイント
上記の方法を選択する際には、以下のポイントを考慮する必要があります。
- 技術的な難易度: CSSのみのアニメーションは最も簡単ですが、複雑なアニメーションにはJavaScriptライブラリが必要となります。
- パフォーマンス: 軽量なローディング画面は、ページの読み込み速度を向上させることができます。
- デザイン: アニメーションの種類やスタイルは、サイトの雰囲気に合致するものを選びましょう。
- メンテナンス: ライブラリやサービスを使用する場合は、アップデートやライセンスの管理が必要となります。
これらの情報を参考に、最適な方法を選択して、ユーザー体験を向上させるローディング画面を実装してください。
javascript jquery html