森のコーディング森のコーディング2013年08月マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。8月28クリックしたらローディング画像が出て外部ページが読み込まれる、をjQueryでつくるカテゴリ:jQueryjavascript表示が重い部分などは、別ファイル化しておいて、クリックしてから読み込んで表示みたいなことをしたいときってあるあるあるあるサンプルをつくりましたそれをjQueryでサクっと実装です。id="container"></div>ボタンがあって、ローディング画像があって、カラのdivがある。動きのイメージとしては、1ボタンを押す2ローディング画像が表示される3カラのdivの中に外部ファイルが読み込まれる4ローディング画像が消えるみたいなことをやりたいんすね。function(){$("#loading").fadeOut();$("#container").fadeIn();});});});aタグをクリックしたら、#loadingがshowで表示される。までは簡単で、ここでのポイントはload()というやつ。処理);「xxx.htmlを読み込みますよ。そんで、読み込み終わったら、なんか処理しますよ。」この、処理の部分を「コールバック」と呼ぶ。なにかが終わったら、そのご始める処理のこと。中にloading_inner.htmlを読み込んで、読み込み終わったら2#loadingをフェードアウト3#containerをフェードインという一連の流れをやってるだ。※ちなみにこれ、ローカルだと動かないだのよ!(調べてみたらブラウザによってはできるらしい)確認するときはサーバーにアップするなりして確認するといい。ボンベイ!2013年08月28日12:12tacshockコメント:0トラックバック:08月28画面読込中のグルグルまわるローディング画像を出す。jQuery・javascriptカテゴリ:javascriptjQuery画像がいっぱい並んでるページなんかは、データが重くなるので、ページの表示に時間がかかる。イライラが軽減される。jQueryでシンプルに実装するのを説明します。サンプルをつくったのでまずは確認。あぁ、ネコかわいいよ、、ねこ・・。GIFアニメで作られてる。検索してきてもいいし、こういうジェネレータサイトみたいなのもある。id="container">〜ページの内容が入るヨ〜</div>大枠としてはdivが2個あるだけ。1つ目のdivはさっきダウンロードしたローディング画像グルグルが入ってる。いつものようにページの中身を入れる。3.css側#container{display:none;}#loading{position:absolute;left:50%;top:20%;margin-left:-30px;}ページの準備ができるまでは、#containerは非表示にしとく。しとかないと、いつものように、準備が完了したところから、ガンッガンッって表示されだしちゃうからね。準備が整ってからパッと完成ページが出たらキレイだね。#loadingのほうは、位置を真ん中にもってきてるだけなので、今回はどうでもいい。いうタイミングでスタートさせろって意味。その中身はjQueryでシンプルに2行かいてます。$("#loading").fadeOut();→#loadingはフェードアウトさせれ$("#container").fadeIn();→#containerはフェードインさせれ簡単!※とはいえ普通に自宅でwifiで見てたら、よっぽどでかいファイルがあるとか、なんかサーバーがすんごい重くなっちゃってる以外は、ローディングなんていらないくらいすぐにデータのダウンロードが完了しちゃうと思う。サンプルもでかめの猫画像などを4枚くらい並べてみたけど、ローディングが瞬殺で消えちゃうから、わざわざdelay(2000)で2秒遅らせたりしてる。(本番で使うときは表示が早ければそれにこしたことはないんだからdelayなんて使う必要ない)ということで、ローディングが活躍するのは、スマホサイトのほうなんだと思う。スマホサイトつくってる方はわかるだろうけど、なんてたってスマホは遅いから。いうアドオンをつかってユーザーエージェントを切り替えて確認。みたいなことをやってたのね。ウィンドウサイズてきにも結局は実機で確認しないとわからなくて、ようやく「そうだ、iphoneシミュレータいれよう」って思い至った(おそい)んで、手早く立ち上がって便利だとおもったのがxcodeのシミュレータだけをmacのドックに入れておく、というやり方。1.お手持ちのmacのアプリケーションディレクトリでXcodeを探すXcodeもってないよー!っていう人。選択3.Contents>Developer>Platforms>iPhoneSimulator.platform>Developer>Applicationsとディレクトリをすすんでいくどんだけ深い階層なんだ!もしかして!永久ループなんじゃ!?と心配になってきたあたりでようやく見つかります。iOSシミュレータというのがありんす。4.iOSシミュレータをドラッグして、お手持ちのmacのdockにグイーっとドロップするとDockに追加されます。あとはここからシミュレータだけを好きなときに好きなだけ立ちあげられます。change」とでる。change」という文言が出て、なんかエラーっぽくなった。ウィンドウの下のようにはハテナマークが出て「ソース管理下にありません」という文言がある。変更して、コミットしてプッシュしたらさっぱりしました。長い英単語をいれるとtableの中をつきぬけちゃうイラレでスライスを速くするスクリプト。bluetoothヘッドセット1時間1円で暖かい。夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。お仕事のご依頼・お問い合わせはこちらコーディングのお仕事が得意です。