Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

jQueryの$(document).readyと$(window).load 実行処理の種類とタイミング

jQueryの$(document).readyと$(window).load 実行処理の種類とタイミング

画像出典:MDN

jQueryを書く時に、$(document).ready(function(){}や$(function() {}や$(window).load(function(){}などで書き始めて括弧の中に処理内容を書くことが多いと思います。今回はjQueryの1番はじめに書く実行処理の書き方の種類と意味について説明します。

 

目次

$(document).readyはHTML(DOM)の読み込みが完了したら実行

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

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

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

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

$(document).ready(function()や$(function()やjQuery(function()などの記述方法は、書き方はそれぞれ違いますが、これらはすべて同じ意味を持っており、HTML(DOM)が全て読み終えたら括弧内に書いた処理が実行されます。

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

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

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

一方、$(window).load(function()や$(window).on('load', function()は、画像や動画などの読み込みが終わったタイミングで括弧内に書いた処理が実行されます。そのため画像が表示しきれていない状態で実行されてしまうため、画像などが絡んだjQueryの処理を記述する場合は注意が必要です。

$(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()が実行 

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

逆に画像や動画が絡むjQueryの処理を行う場合は$(document).ready(function()で書いてしまうと、うまく実行内容が処理してくれません。もしうまくjQueryが動作しない場合は、まず最初にここの部分を疑ってみても良いと思います。