[jQuery] ローディングのクルクルを瞬殺で実装する

2013.10.12 jQuery loading.jpg

こんにちは! 絶賛就活中のいわだて (@dutchisover) です!今回は思いつきでこのブログにローディングのクルクルを実装してみたらものすごくカンタンだったのでその流れで記事を書きました!

Loading

当ブログでも実装しました!

この記事を開いていただいた時に、画面中央にローディングの画像がクルクル回っていたかと思います。
前のテーマで実装してましたけど、新テーマでは外しました。

こんなんです。

Gif load

ブログ記事や画像など、コンテンツを全てロードするまで表示されて、全て読み込まれると消えます。

ちなみにこの記事ではローディングアニメーションの要素はGIF画像を使っています。

jQueryの実装方法

すさまじくカンタンです。

でOK。この記事ではローディング画像をdivで囲っていて、そのdivにid=”loading”を付けています。

jQuery自体はローディングの画像(要素)を、ページ全体が読み込み終わったタイミングで消しているだけです。

アレンジでhide()fadeOut()slideUp()など、アニメーションしながら消すことも出来ます。
このブログでは fadeOut(1000) と指定して、少しゆっくりめに フワッと 消しています。

HTMLとCSSの実装

ローディング中のみ表示させるだけでいいのですが、元のコンテンツが崩れないようにしないといけません。

また、GIF画像だけだと
Gif load
こんな感じでちょっとあじけないので、divで囲ってちょっと飾ってみます。

HTML

CSSではdivを少しいじって、丸角にしたり透過させたりしています。CSS3なのでIE8以下非対応です。
ここはお好みなので自由に実装してください。

また当ブログでは、表示崩れを起こさないためにposition: fixedを使っています。

CSS

素材と参考サイトと雑感

ローディング用のアニメーション素材はいろんなサイトがありますが、今回は Loader Generator – Ajax loader さんから拝借しました。

形状や色、スピードにサイズ、色などカスタマイズ性が高く、シンプルでキレイなGIF画像ができます。オススメです。

また、今回の記事は画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript : code14さんの記事を大変参考にさせていただきました(´∀`*)

ローディングのクルクルがあると、ないときよりもロード時間が早く感じるそうです。
今回の僕も、よそのサイトがローディングのクルクルを実装していて、少し読み込みが長かったけど離脱せずに待っていた自分に気づいたからでした。

なので離脱率などが気になる方や、なんとなく格好つけたい方には実装をオススメします!

以上、@dutchisover でした!

最近の記事

Sponsored