ひらい ぶらり Hi-Library

ぷろぐらみんぐについて。ときどきどうでもいいことについて。

window.onloadでは遅い

 jQueryに慣れると、prototypeよか便利な気がしますね。
 最新版のprototypeはjQueryにある機能を大体備えてますが、調べていると先に実装いているのはjQueryの方が早いということを書いてある記事をちらほら目にします。
 jQueryの場合は$()で指定できるものがidだけじゃなく、クラスだろうがタグだろうが何でもぶち込めます。
 記述の仕方もCSSに書くのと同じで

 id="hoge"    => $("#hoge")
 class="hoge" => $(".hoge")
 <div>        => $("div")

 見たいな感じですね。

 複数のオブジェクトを指す場合($(".hoge")とか)は
 $(".hoge").css("height","10px");
 とか書くとclass="hoge"を持つオブジェクトすべてのheightプロパティの値が10pxになりますね。
 prototypeのように、要素毎に処理を行いたい場合も、記述の仕方は違いますがeachで行うことが出来ます。

 後、よくwindow.onload = function(){};みたいな感じで、初期設定みたいなことをよく記述しますが、window.onloadだと画像まですべて読み込まれてから行われるため、実行されるタイミングが遅かったりして困ったりしてました。
 とかにスクリプトを書き込むと、その時点ではすべてのDOMが読み込まれていないため、DOMをいじることができません。するとhtmlの最後にスクリプトを書かなきゃいけないことになりますが、それじゃコードが汚いっすって話ですね。
 そこで$(function(){})を使うわけです。
 これを使えばDOMが読み込み終わった直後に実行されるので、画像の読み込み中にスクリプトが実行されてウマーというわけですね。
 まあ最近は回線も早いので、そんなにタイムラグは発生しないかもしれませんが、モバイルやらその他通信機でアクセスする場合には結構なタイムラグが発生しますね。
 特に需要があるのがiPhoneです。ええまたiPhoneです。
 iPhoneだとiPhoneを縦表示なのか横表示なのか判別して色々とCSSのプロパティの値を変えてやったりするわけですが、onloadだと画像が読み込まれてから値が変わるため、画像が読み込まれるまでの間、傾きに合わない状態で表示されてしまうことがあるんです。 例えば、デフォルトで縦表示に横幅や縦幅を合わせているのだけれども、ユーザがiPhoneを横にしまたままサイトを開くと、画像が読み込まれるまでの間は縦表示に合わせたサイズで表示されてしまうわけです。
 しかし、DOMが読み込まれた瞬間に実行すれば(だいたい)あたかも最初からサイズが判別されているかのように表示できます。
 基本的にはこっちを使うことの方が多そうですよね。