JavaScriptはなんでもかんでもonloadに入れればいいってもんじゃない

Author:
cup-of-coffee-01

jQueryを書く時、$(function(){});を当たり前のように書く事があるかもしれない。
$(“#aaa”).onとかも当たり前のようにfunction内に書くかもしれない。
が、ちょっと待った。
なんでもかんでもそこに入れればいいってわけじゃないです。

$(function(){});はあくまでwindow.onloadとほぼ一緒。
全部のレンダリングが終わったら読み込まれるもの。
つまり、全部のレンダリングが終わらないかぎりそのjQueryは動かないのだ。
ページが膨大で一部だけ読み込みが終わらない時なんかは動かなくなってしまうのだ。
SNSのアイコン読み込みが時間かかったり広告表示が遅い場合よくこれが起こってしまう。

ちなみに、onload内に入れないとどうなるか。
その時にすでにセレクタに対応したタグが読み込まれていれば動作する。
無ければ動作しない、となる。

ってことで、まずそのイベントはどこで起こるのかを見極めましょう。
ページの上のほうにあるのなら、んでscriptタグが下の方にあるのなら、別にonloadに入れる必要は無いのである。

scriptタグをページ下部に書く場合はそういう理由が多いですね。
逆にheaderタグに書いたりする場合は、そのスクリプト読んだ時点でタグが何もないため、onloadは必須となる。
何も考えずにonload内に入れないよう注意しましょうね。

Share on Facebook
Pocket