2013年08月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

クリックしたらローディング画像が出て外部ページが読み込まれる、をjQueryでつくる

表示が重い部分などは、別ファイル化しておいて、
クリックしてから読み込んで表示

みたいなことをしたいときってあるあるあるある


サンプルをつくりました 


 それを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をフェードイン

という一連の流れをやってるだ。


※ちなみにこれ、ローカルだと動かないだのよ!
(調べてみたらブラウザによってはできるらしい)
確認するときはサーバーにアップするなりして確認するといい。


ボンベイ!
 

画面読込中のグルグルまわるローディング画像を出す。jQuery・javascript

画像がいっぱい並んでるページなんかは、データが重くなるので、ページの表示に時間がかかる。

そんなときは、まっしろいまま待たせるんじゃなくて、
せめて、

「今ローディング中ですよー」

loading

という、このグルグルまわるアニメーションを出してあげると、
少しはイライラが軽減される。

(ほんの少しだけ)

それを、javascript & jQueryでシンプルに実装するのを説明します。


サンプルをつくったのでまずは確認。

あぁ、ネコかわいいよ、、ねこ・・。


1.まずはローディング画像を用意

あのグルグルまわってる画像 はGIFアニメで作られてる。
適当に「loading画像」 で検索してきてもいいし、
 こういうジェネレータサイトみたいなのもある。
http://loadergenerator.com/ 




2.html側

<div id="loading"><img src="img/loading/loading.gif"></div>
<div id="container">
 〜ページの内容が入るヨ〜
</div>

 
大枠としてはdivが2個あるだけ。

 1つ目のdivはさっきダウンロードしたローディング画像グルグルが入ってる。

2つ目のdiv id="container" にはいつものようにページの中身を入れる。



3.css側

#container{display:none;}
#loading{
position:absolute;
left:50%;
top:20%;
margin-left:-30px;
}

ページの準備ができるまでは、#containerは非表示にしとく。
そうしとかないと、いつものように、準備が完了したところから、ガンッガンッって表示されだしちゃうからね。
準備が整ってからパッと完成ページが出たらキレイだね。

 #loadingのほうは、位置を真ん中にもってきてるだけなので、今回はどうでもいい。


そして問題のjavascript側


4.javascript側

window.onload = function(){
$(function() {
$("#loading").fadeOut();
$("#container").fadeIn();
});
}


window.onloadは、htmlや画像なんかの全部のリクエストがダウンロードされて準備完了したヨー というタイミングでスタートさせろって意味。

その中身はjQueryでシンプルに2行かいてます。 

$("#loading").fadeOut();

→#loadingはフェードアウトさせれ

$("#container").fadeIn(); 

→#containerはフェードインさせれ


簡単!
 

※とはいえ普通に自宅でwifiで見てたら、よっぽどでかいファイルがあるとか、なんかサーバーがすんごい重くなっちゃってる以外は、ローディングなんていらないくらいすぐにデータのダウンロードが完了しちゃうと思う。

サンプルもでかめの猫画像などを4枚くらい並べてみたけど、ローディングが瞬殺で消えちゃうから、わざわざdelay(2000)で2秒遅らせたりしてる。
(本番で使うときは表示が早ければそれにこしたことはないんだからdelayなんて使う必要ない)

 

ということで、ローディングが活躍するのは、スマホサイトのほうなんだと思う。

スマホサイトつくってる方はわかるだろうけど、なんてたってスマホは遅いから。


※※ここではサクっと実装するためにシンプルに説明してるけど実際は
以下サイトさんのように、jsをオフにしてる人のための配慮っていうのをしたほうがいいよ!
http://2g.atsukitaira.com/javascript/jquery/953/
(jsオフにしてる人っていまどきほんとにいるの?)



ドミンゴス!

サクっと立ちあがるiPhoneシミュレータ

スマホサイト作っていて、表示を確認したい時、
これまで、chromeのブラウザwindowをめいっぱい縮めて、
「Chrome UA spoofer」 というアドオンをつかってユーザーエージェントを切り替えて確認。

みたいなことをやってたのね。

でもウィンドウサイズてきにも結局は実機で確認しないとわからなくて、ようやく
「そうだ、iphoneシミュレータいれよう」

って思い至った(おそい) 


んで、手早く立ち上がって便利だとおもったのが
xcodeのシミュレータだけをmacのドックに入れておく、というやり方。


1.お手持ちのmacのアプリケーションディレクトリでXcodeを探す
 
08271

Xcodeもってないよー!っていう人。(倖田來未)
そういう人はこちらでインストール
https://developer.apple.com/xcode/


2.右クリックで パッケージの内容を表示 を選択
 

3.Contents>Developer>Platforms>iPhoneSimulator.platform>Developer>Applicationsとディレクトリをすすんでいく

08272


どんだけ深い階層なんだ!もしかして!永久ループなんじゃ!?
と心配になってきたあたりでようやく見つかります。
iOSシミュレータというのがありんす。


4.iOSシミュレータをドラッグして、お手持ちのmacのdockにグイーっとドロップ

するとDockに追加されます。

08273

あとはここからシミュレータだけを好きなときに好きなだけ立ちあげられます。


08274

メニューの

ハードウェア>デバイス

から、ipadなり、iphone5なり、いろいろ選べるよ!


チャオ!


 

【GIT】sourcetreeでプルしようとしたら「uncomitted change」とでる。

sourcetreeでデータたちをプルしようとしたら

「uncomitted change」という文言が出て、なんかエラーっぽくなった。

ウィンドウの下のようにはハテナマークが出て

「ソース管理下にありません」という文言がある。


なんだなんだ!?

って思ったら、単純に、前回僕が変更したファイルたちをコミットしてませんよ

っていう警告だったようで、


変更して、コミットしてプッシュしたらさっぱりしました。


メモ。 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ