JavaScriptでloading処理を実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、ページを表示する時にloading処理が走るプログラムを学習しました。

demoは、「こちら」で確認できます。

環境構築

最初に、簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

開発

ページの作成

最初にページの作成をしましょう。index.htmlに次のコードを記述してください。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイルの追加

次にスタイルをstyle.cssに記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

loading処理の実現において、先ほど設定したCSSの「filter」がキモです。

この値を0% -> 3% -> 5% -> 10%と変更してみましょう。

0%
3%
5%
10%

画像がぼやけていくことがわかりますね。つまりこの数値を操作することでloading処理が実装できます。

要素を取得する

JavaScriptで制御すべき要素が2つあります。最初にこれらの要素を取得しましょう。

setInterval/clearIntervalの実装

loading処理は、ページが読み込まれてから特定の関数を一定間隔で実行することで、filter: blur(0px);の値を変更し、画像を徐々に表示します。

この一定間隔の処理を実現するために、JavaScriptの「setInterval」を使いましょう。

setIntervalの第一引数には、実行したい関数(ここでは、blurring)を指定します。そして第二引数には、実行間隔をミリ秒(1/1000秒)を指定します。

これを設定すると30ミリ秒間隔でblurring関数が永遠に実行されます。

特定の条件下でこのタイマーを止めたいので、clearIntervalを設定します。

ローディング状態が100%になったらタイマーを止める設定をしました。

loading状態を表示する

ローディングの進行状態を画面上に表示できるようにします。

innerTextを使うと取得した要素のテキストを変更することができます。

loading状態のフェードアウト

次は、画面に表示されている「〇〇%」をフェードアウトする処理を実装しましょう。

「loadText.style.opacity」のopacityの値を変更することで要素を徐々にフェードアウトすることができます。

opacityプロパティは、「0~1」の間で設定されていなければいけません。その範囲で計算ができるようにscale関数を実装しています(JavaScriptは変数に処理を格納できます)。

画像のフェードイン処理

最後にblurの値を操作して、画像のフェードインを実現しましょう。

これでOKです。

おわりに

今回は、setIntervalの使い方やScaleの計算手法など勉強になりましたね。CSSと組み合わせることで結構簡単に実装ができることもわかったと思います。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す