jQueryを書く時に、$(document).ready(function(){}や$(function() {}や$(window).load(function(){}などで書き始めて括弧の中に処理内容を書くことがあります。

今回はjQueryの1番はじめに書く実行処理の書き方の種類と意味について説明します。

HTML（DOM）が全て読み込み完了したら実行

$(document).ready(function(){
  //処理内容
});

$(function(){
  //処理内容
});

jQuery(function(){
  //処理内容
});

jQuery(document).ready(function(){
  //処理内容
});

• $(document).ready(function()
• $(function()
• jQuery(function()
• jQuery(document).ready(function()

上記の記述方法は書き方はそれぞれ違いますが、これらはすべて同じ意味を持っておりHTML（DOM）が全て読み終えたら括弧内に書いた処理が実行されます。

$(window).loadは画像や動画などの読み込みが完了したら実行

$(window).load(function(){
  //処理内容
});

$(window).on('load', function(){
  //処理内容
});

• $(window).load(function()
• $(window).on('load', function()

上記は画像や動画などの読み込みが終わったタイミングで括弧内に書いた処理が実行されます。

そのため画像が表示しきれていない状態で実行されてしまうため、画像などが絡んだ処理を記述する場合は注意が必要です。

$(document).ready(function()と$(window).load(function()の実行処理のタイミングの違い

$(document).ready(function()と$(window).load(function()は実行タイミングが違うことがわかりました。

それではそれぞれどのタイミングで実行されるかまとめてみました。

1. ページの読み込みスタート
2. HTMLの読み込みが完了（DOMの構築完了）
3. $(document).ready(function()が実行
4. 画像や動画の読み込みが完了
5. $(window).load(function()が実行 

画像や動画が絡む処理を行わない場合は$(document).ready(function()を使った記述の仕方が処理速度的にも良いです。

逆に画像や動画が絡む処理を行う場合は$(document).ready(function()で書いてしまうと、うまく実行内容が処理してくれません。

もしうまく動作しない場合は、まず最初にここの部分を疑ってみると良いと思います。