ページ読み込み後にjavascript(jQuery)を実行する方法

この記事をシェアする

  • ツイッターでシェアする
  • facebookでシェアする
  • google+でシェアする
  • はてぶにブックマークする
ページ読み込み後にjavascript(jQuery)を実行する方法

こんにちは。まりもです。
ひさしぶりにweb系の備忘録です。

わざわざ記事にすることじゃないかもしれませんが、javascriptなんて全然理解してなくてjQueryもなんとな〜く使ってる無能コーダーな僕には有用な事で、しかも物忘れが激しいので残しておきます。

jQueryのプラグインを多用してると、その実行のタイミングが思い通りに行かなくてイラッとする事ってあると思う。
例えば、ブロックの高さを揃えるプラグインや、画像のサイズを一定にして並べてくれるギャラリーなど。
他にも、CSSでブロックの大きさを制御しているのに、html・CSS・javascriptの読み込みタイミングが微妙にずれてレイアウトが崩れることもある。
ハイスペックなマシンで高速インターネット接続だと大丈夫だったりするけど、汎用スペックマシンの共有ネットワークだったり、スマホやタブレット端末だと処理が追いつかないから崩れる。

実はこのサイトもこういう現象に悩まされている。
レスポンシブデザインにするためにimgタグにサイズを入れずCSSでwidth:100%に設定したために、DOM構築時に画像サイズが定義されない。
そして、各カラムを同じ高さにするjQueryプラグインの発動タイミングの方が買ってしまって、footerエリアがメインコンテンツエリアにかぶってしまう。

わかりにくいかな?

言葉で表現するのって難しいな。
本来の目的は備忘録なので解決方法だけ書いておきます。

 

これらはやっぱりjavascript実行のタイミングが原因の場合がほとんどです。
なので、html・CSSを全部読み込んだあとでjavascriptを実行するようにしれあげれば解決します。

 

jQueryプラグインでは、jQuery実行のための以下のコマンドが必ずあると思います。

$(document).ready(function(){
    // 実行したい処理
});

$().ready(function(){
    // 実行したい処理
});

$(function(){
    // 実行したい処理
});

この3つは、省略の度合いが違うだけで同じ意味です。
DOM構築後に実行するっていうコマンドで、もうこの意味が情弱コーダーには意味不明なんですけど、要はhtmlの各要素、<body>とか<h1>とか<p>などのタグのツリー構造の事みたいです。
DOMの意味はDocument Of Modelなので、$(document).readyは「DOMの準備が出来たら」って意味なんですねきっと。
これの構築後にjavascript実行するんなら問題無いだろ?
と思っちゃうんですけどね、僕みたいなもんは。

でもこのDOM構築には、数値指定していない画像を読み込んで数値を取得して、しかもレスポンシブに表示する。といういかにも厄介な処理は含まれてないということです。
なんとなく理解出来ますよね?

 

なのでこの処理タイミングを、画像やCSSなどすべて読み込まれた後で実行する!という記述に変えてあげます。

$(window).load(function () {
    // 実行したい処理
});

わかりやすいですね。「windowがloadされたら」実行するってことです。

 

僕ね、思うんですよ。
jQueryプラグインのHow to use?のページにはだいたいソースの例が書いてあるけど、最初から $(window).load にしといたらアカンのか!?
今のところレイアウトに関するjavascriptに関しては、DOM構築後に実行するメリットがあまりなくて、load後に実行するメリットの方が大きい気がするんですけど、なにかデメリットがあるのでしょうか?
おしえて偉い人!!