jQueryの$(function(){...});と$(window).on("load",function(){...})の違い

jQueryの$(function(){...});と$(window).on(

本エントリーは「to-R JavaScript Advent Calendar 2015」8日目のエントリー、今回はjQueryの$(function(){...});と$(window).on("load",function(){...});の違いについて解説を行います。

共にページの読み込みが終わったタイミングでfunction(){...}内に書かれている処理を実行するための記述ですが、$(function(){...});に書かれている処理はHTMの読み込みが終了したタイミング、正確にはDOMツリーの構築が完了したタイミングで実行されます。

$(function(){
	//do something
});

それに対して$(window).on("load",function(){...})はページ内のすべてのリソース、つまり画像やscript要素やlink要素で読み込んでいるJavaScirptファイルやCSSファイルなどすべての読み込みが終了したタイミングで実行されます。

$(window).on("load",function(){
	//do something
});

基本的には$(function(){...});のほうが早いタイミングで実行されるのでこちらを使っておけば問題ありませんが一部例外があります。

img要素の画像サイズの取得が必要な場合、$(function(){...});ではまだ画像の読み込みが完了していないことがありその場合は画像サイズが正確に取得できません。

そういった場合は$(window).on("load",function(){...})を利用して画像の読み込みが完了してから命令を実行しましょう。

//NG
$(function(){
	console.log($("img").width(),$("img").height());
});
//OK
$(window).on("load",function(){
	console.log($("img").width(),$("img").height());
});

関連エントリー

jQuery基礎文法最速マスター
jQueryで指定されたイベントの定義場所を取得する方法
DOM 読み込み完了時に関数を実行する domready.js
prototype.jsを使ってみる 2-Event.observe
jQueryを良くする25のTIPS

スポンサードリンク

«WebRTC入門 | メイン | ES5入門 - Array編»