表示が重い部分などは、別ファイル化しておいて、
クリックしてから読み込んで表示
みたいなことをしたいときってあるあるあるある
サンプルをつくりました
それをjQueryでサクっと実装です。
1.HTML側
ボタンがあって、ローディング画像があって、カラのdivがある。
そんだけ。
動きのイメージとしては、
①ボタンを押す
②ローディング画像が表示される
③カラのdivの中に外部ファイルが読み込まれる
④ローディング画像が消える
みたいなことをやりたいんすね。
2.css側
3.jQuery側
aタグをクリックしたら、#loadingがshowで表示される。
までは簡単で、ここでのポイントはload()というやつ。
文法としては
load('xxx.html' , 処理);
「xxx.htmlを読み込みますよ。
そんで、読み込み終わったら、なんか処理しますよ。」
この、処理の部分を「コールバック」と呼ぶ。
なにかが終わったら、そのご始める処理のこと。
上記のサンプルでいうと、
①#container の中にloading_inner.htmlを読み込んで、読み込み終わったら
②#loadingをフェードアウト
③#containerをフェードイン
という一連の流れをやってるだ。
※ちなみにこれ、ローカルだと動かないだのよ!
(調べてみたらブラウザによってはできるらしい)
確認するときはサーバーにアップするなりして確認するといい。
ボンベイ!
クリックしてから読み込んで表示
みたいなことをしたいときってあるあるあるある
サンプルをつくりました
それをjQueryでサクっと実装です。
1.HTML側
<a href="javascript:void(0);" id="imagestart">おれのことはいいから!押せ!!</a><div id="loading"><img src="img/loading/loading.gif"></div><div id="container"></div>
ボタンがあって、ローディング画像があって、カラのdivがある。
そんだけ。
動きのイメージとしては、
①ボタンを押す
②ローディング画像が表示される
③カラのdivの中に外部ファイルが読み込まれる
④ローディング画像が消える
みたいなことをやりたいんすね。
2.css側
#container{display:none;}#loading{display:none;position:absolute;left:50%;top:20%;margin-left:-30px;}
3.jQuery側
$(function() {$("#imagestart").click(function(){$("#loading").show();$("#container").load('loading_inner.html', function(){$("#loading").fadeOut();$("#container").fadeIn();});});});
aタグをクリックしたら、#loadingがshowで表示される。
までは簡単で、ここでのポイントはload()というやつ。
文法としては
load('xxx.html' , 処理);
「xxx.htmlを読み込みますよ。
そんで、読み込み終わったら、なんか処理しますよ。」
この、処理の部分を「コールバック」と呼ぶ。
なにかが終わったら、そのご始める処理のこと。
上記のサンプルでいうと、
①#container の中にloading_inner.htmlを読み込んで、読み込み終わったら
②#loadingをフェードアウト
③#containerをフェードイン
という一連の流れをやってるだ。
※ちなみにこれ、ローカルだと動かないだのよ!
(調べてみたらブラウザによってはできるらしい)
確認するときはサーバーにアップするなりして確認するといい。
ボンベイ!