JavaScriptでカードローディング処理を実装しよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、JavaScript(あとCSS)でカードローディング処理の実装方法を学びました。

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

環境構築

簡単な環境構築をお願いします。

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

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

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

スタイル(CSS)を装飾

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

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

実はこの段階で、ローディング処理の一部が入っています^^

この波打つ感じは、CSSのanimationkeyframesを組み合わせて実現しています。コードでは以下の部分ですね。

こうやれば波打つ感じを実装できること」を知っていれば、コピペでいけそうですね。

JavaScriptの実装

準備が完了したので、カードローディング処理を実装していきましょう。

要素を取得する

画面操作に必要な要素を取得します。

カード情報の取得と埋め込み

次に、カードに表示するデータの取得と埋め込み処理を実装します。

画像データは、imgixからとってきています。

innerHTMLは、取得したHTML要素内に新たな要素を埋め込むことができます。これで、カードの各々の部分にカードデータが入ります。

指定時間後に処理を実行する

カードローディング処理を実現するために、画面表示後の数秒間はカード情報を表示させたくありません

そこで、setTimeoutを使いましょう。

第一引数に指定したgetDataを2500ミリ秒(2.5秒)後に実行するように設定しました。

これで完成です。

おわりに

今回もCSSが難しかったですね。カードを簡単に作りたいという方は、BootstrapのCardsを使うと良さそうです。

また、CSSでローディング処理 -> JavaScriptでデータ表示の連携は、他のアプリにも応用ができそうですね^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す