フツイッター フェイスブック RSS

WEB作成からカメラ・ガジェット・PC系など雑多なブログ

jQuery

jqueryでコンテンツや画像の読み込み中にローディングアニメーションを導入する方法

2016年02月27日

Pocket

コンテンツ読み込み中にローディングアニメーションを使用する

前回の記事でコンテンツのフェードインを導入しましたが、データ量が多いためこのままでは読み込み中その部分が真っ白になってしまいます。
これじゃコンテンツがないのか読み込めていないのか分からないので、併せてローディングアニメーションも導入しました。

jqueryでフェードイン表示!.animateでコンテンツや画像をフワッと表示させる方法
jqueryでフェードイン表示!.animateでコンテンツや画像をフワッと表示させる方法

当サイトのフロントページは画像がやや大きめなのもあってか、少し読み込みが遅いのが気になっていました。 そこで最近はそれほど見かけない手法です...

ローディングアニメーション導入準備

1.GIFアニメーション

ローディングにまず必要なGIFアニメーションですが、私はこちらから頂きました。

ちょっと便利帳:ローディング画像各種

ローディング画像の設置

設置場所はフェードインするコンテンツの直近に設置してやります。
具体的にはローディング画像とコンテンツをラップしておくといいのではないでしょうか。
例えばこんな具合です。

ちなみにtopとleftを50%にするとローディング画像のサイズ分中央から寄ってしまいますが、CSSをこう書くと画像がセンターに配置されます。

あとはjavascriptを切っているとローディング画像が表示されたままになってしまうのでdisplay:noneを指定しておきます。

jqueryの記述

まず前回までのフェードインさせるコードです。

フェードインでコンテンツを表示するコード

ここにロード前はローディング画像を表示、ロード後フェードイン処理が開始される前にローディング画像を消去の処理を書きます。

SAMPLE PAGE

6行目でローディング画像の表示、10~12行目でローディング画像のフェードアウト処理をしています。
コンテンツのフェードインと同様にforeachでディレイタイミングを段階的にして順番に消えるようにしました。

まとめ

調べるまでは難しそうなイメージでしたが、やってみると結構簡単な作業でした。
まぁこんな小技に頼らず読み込みスピードを上げる作りにするに越したことはないのですが、動的なエッセンスを加えたい時やどうしてもという際は利用するのもいいんじゃないでしょうか。

このカテゴリで良く読まれている記事
関連記事

COMMENT