jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2012.12.14

ページ読み込みの際にローディングを表示する

Category:

この方法はIEで正常に動作しません。IE対応する方法について別に記事を書きましたので、そちらを参照してください。

これまでローディングを表示するということにまったく無頓着だったんですが、ウェブページをロードした直後にいろいろとアニメーションさせるのが楽しくなってくると、大きな画像を読み込み終わる前にanimate()やらが動いてしまうのが気になり出して、そこでやっとローディング表示の大事さを知りました。

jqueryで作られたリッチサイトでローディング表示が用いられているものはいろいろと目にして来ましたが、作り方はまったく学んで来なかったので新たに調べてみました。

.load()を使用した例は検索結果に山ほど表示されましたが、このメソッド自体がjquery1.8で非推奨になっているようだったので、.on("load")で代替するかたちで書きました。

//loadingのgifアニメ画像を表示
$("body").append("<p id='loading'><img src='load.gif' alt=''></p>");
//画像を一旦非表示にする
$("#photo img").hide();

//画像が読み込まれたあとに画像を表示、loadingを非表示にする
$("#photo img").on("load",function(){
	$("#loading").hide();
	$(this).show();
});

サンプルは以下。
jquery loadingの練習 - js do it

img自体を.on("load")の対象にしないとimgが完全に読み込み終わる前に.on("load")内のイベントが動いてしまう(当たり前?)、というのが慣れるまで少し時間がかかりましたが、それでも案外簡単に書くことが出来ました。パーセント表示にするとUI的にはもっと使いやすくなると思いますが、まずは簡単なところまで。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.