ajaxの読み込み演出でYoutubeみたいなプログレスバーをつける

いろいろな方法で今読み込んでますよと言うのをお知らせする方法があります。
例えばLoading spinnerとかpieで読み込み状態を表したりとか、パーセント表記、中には画面全体を使ってシャッターが開くような感じで読み込ませるものもあります。

ajaxはjavascriptあるいはjQueryがPHPにアクセスしてその応答がhtmlに反映されるというものなので、画面にすぐに変化が出ればよいですが、重めの画像を読み込んだりしている時に何も反応がないと、動いてないかな?とユーザーはまたリンクをクリックしたりボタンを押したりしてしまいます。
それを目で見てわかるようにしたのがずっと昔で言えば「Now Loading」であったり、上に紹介したようなものであったりしたわけです。

最近では色々と手のこんだものも出てきて、

Creative loading effects
こういったサイトで、色んなアイデアが見つかります。

しかし、誰もが一度ぐらいは目にしたことがあるであろうYoutubeのローディングエフェクト。画面の上部にひっそりと設置されてデザインにじゃまにならず、そしてどれぐらいロードされたかがわかると言う優秀な演出を実現できるプラグインがありました。

理屈としては、ajaxが始まったら読み込んでcssでアニメーションをつけたりしてajaxが完了したら画面右端に達すると言う感じですが、仕組みがわかっていても実現するのはなかなか難しいものです。いろいろ試してみましたが、自分でやるよりはプラグインの方が速いということで、いくつか候補がある中で、

jquery.ytLoad

その名もズバリを選択してみました。

準備的には、ytLoad.jsとtransit.js、ytLoad.cssをいつものごとくヘッダあるいはフッタあたりに忍ばせて、これまたお決まりの$(function(){の中に、$.ytLoad();と書くだけのお手軽設計。

あとはajaxで通信すると画面上部にプログレスバーが表示されます。

Initialize ytLoad. ytLoad has to be called once before it can be used $.ytLoad().
Trigger ytLoad. ytLoad is automatically triggered on ajax calls $.load(‘ajax.html’) or can be triggered manually $.ytLoad(‘show’).

ytLoadの初期化で、利用する前に一回は$.ytLoad()を読み込んどいてねと言う感じです。ytLoadはajaxが呼び出されたら自動的にトリガーしますってな感じですね。手動でも行けますぜみたいなこともあります。

本来は、読み込みの状態を確認しつつその割合をプログレスバーで表すのが正しいのでしょうが、今現在の問題点としては見ているユーザーが「今、裏で何してんの?」を解消するのが目的なわけです。あぁ読み込んでるんだなとかがわかればそれだけで少しぐらい待ってくれるでしょう。何も表示せずだと、「ど、ど、どうした!ウイルスか?」みたいな余計なことも考えてしまう場合もあります。
「HDD逝ったか」「ブラウザが壊れたか」と、自分の環境を気にしてくれるような人は天使ですが、だいたい「ダメだ、違う所探そう」になってしまうと思うので、そこらも考慮して使用するのが良いと思います。

スポンサーリンク

シェアする

フォローする