$(function(){});と$(window).on("load",function(){})

まじで忘れる＆間違える　読み込みタイミングの違い備忘録

$(function(){...});

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

$(window).on("load",function(){...})

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

つまり$(function(){...});のほうが
早いタイミングで実行される

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

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

参考
https://blog.webcreativepark.net/2015/12/10-185226.html