.net column
.NET開発者のためのブログメディア

jQueryのon loadとは?jQueryのon loadは適切に使おう!

2021年02月12日
SE
jQueryのon loadとは何ですか?
PM
解説しますので参考にしてみてください。

jQueryのon loadとは?


jQueryはJavaScriptで使用できる多機能なライブラリです。JavaScriptにはwindow.onloadというメソッドがあり、Queryにもそれに近い機能があります。これらについて理解していないと、JavaScriptとjQueryのプログラムをうまく作ることはできません。

なおこの記事のサンプルを実行する場合はhtmlファイルのheadタグ内に以下を記述してください。以下が最新とは限りません。

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

jQueryは記述位置によっては正しく動かない

JavaScriptやjQueryはscriptタグ内に記述します。以下はdivタグ内にtextメソッドでテキストを追加しようとしています。

<body>
<script>
$(‘div’).text(‘テキスト’);
</script>
<div></div>
</body>

しかしこれではうまくいきません。以下のようにjQueryを記述する位置を変えると、divタグ内にテキストを追加できます。

<body>
<div></div>
<script>
$(‘div’).text(‘テキスト’);
</script>
</body>

readyメソッドを使えば解決する

readyメソッドを使えば解決する理由は、htmlが上から順に実行されるからです。jQueryで操作する対象のタグの後にjQueryを記述することで、正しく動作します。しかしこのように常に対象のタグとの位置関係を考えてjQueryを記述するのは大変です。

htmlを全て読み込んだ後にjQueryの処理を開始できるようにすれば、どの位置にでもjQueryを記述することができます。それを可能にするのが以下のreadyメソッドです。

<body>
<script>
$(document).ready(function() {
$(‘div’).text(‘テキスト’);
});
</script>
<div></div>
</body>

readyメソッドは省略も可能

$(document).ready(function() {~});のdocumentはhtmlページ全体を意味します。readyはその読み込みが終わったらfunctionの処理を実行するというメソッドです。これを使用すればjQueryをどの位置にでも書くことが出来ます。

なおこの記述は多く使われるので、以下のようにdocumentやreadyを省略して書くことができます。

$(function() {
$(‘div’).text(‘テキスト’);
});

readyを使用すればheadタグ内でも動作します。JavaScriptやjQueryはhtmlと別にjsファイルに分けてそちらに記述して、以下のようにhtmlのhead内で読み込むのが普通なので、readyは必須なのです。

<head>
<script type=”text/javascript” src=”script.js”></script>
</head>

on loadでも同じことが出来る

ところが実は、JavaScriptにもonloadという同じような機能があります。以下のようにしても、divタグの前の位置の記述で動作します。

window.onload = function() {
$(‘div’).text(‘テキスト’);
}

jQueryでも同じことができます。

$(window).on(‘load’, function() {
$(‘div’).text(‘テキスト’);
});

readyとon loadの違いは?

readyとon loadはどう違うのでしょうか。両方ともhtmlタグを読み込んだ後にJavaScriptやjQueryの処理を開始するのは同じですが、そのタイミングが少し違うのです。htmlはブラウザで開くと、まずreadyとon loadの箇所をスキップして、htmlタグからDOMの構築を行います。

DOMとはDocument Object Modelの略で、ブラウザ上でこれを構築することで、HTMLタグが機能します。

readyとon loadのどちらを使うべき?

DOMを構築した後は、jQueryのreadyの箇所が実行されます。このタイミングならどの位置のタグも処理できます。その後は画像などを読み込みます。そして全てを読み込んだ後に、on loadの処理が実行されます。

つまりreadyの方がon loadより早いということです。使用方法は画面表示の開始と同時に処理を行いたい時はreadyで、画像を含めて全てが表示された後が良ければon loadが良いでしょう。

常にreadyを使えば良いというわけではない

JavaScriptやjQueryを使う上ではほとんどの場合はreadyで良いのですが、htmlページでアニメーションのような動きがある処理を行う場合は、on loadの方が良いでしょう。またjQueryで画像サイズなどを取得する場合も、on loadのタイミングでやるべきです。

jQueryにはanimeteメソッド等があって、動きがある処理も得意です。readyばかり使うのでなく、on loadという遅いタイミングで処理できる方法もあることは覚えておいた方が良いでしょう。

DOMContentLoadedも使える

なおjQueryのreadyと全く同じタイミングで実行できるDOMContentLoadedもあります。以下のようにしても、readyと同じタイミングで実行されます。

document.addEventListener(‘DOMContentLoaded’, function() {
$(‘div’).text(‘テキスト’);
})

注意すべき点は、この機能はIE9以降のブラウザでしか動作しないことです。古いブラウザは非対応です。ただ今はそれよりも新しいブラウザを使うのが普通なので、大きな問題にはならないでしょう。

readyは複数記述できる

なおreadyは以下のように複数記述することもできます。

<script>
$(document).ready(function() {
$(‘div’).text(‘テキスト1’);
});
$(document).ready(function() {
$(‘p’).text(‘テキスト2’);
});
</script>

<div></div>
<p></p>

readyやon loadはなるべく1回だけ行うように

しかしこの場合、readyの数だけDOMが構築されたかどうかのチェック処理が必要になって、動作が重くなります。以下のようにreadyは1回だけ行うようにしましょう。

<script>
$(document).ready(function() {
$(‘div’).text(‘テキスト1’);
$(‘p’).text(‘テキスト2’);
});
</script>

SE
readyとon loadの違いがわかりました。
PM
readyとon loadの理解を深め、適切に使ってみましょう。

jQueryのon loadは適切に使おう

jQueryのreadyとon loadについて解説しましたが、ご理解頂けましたでしょうか。基本的にはreadyを使う機会の方が多くなりますが、on loadで遅いタイミングで処理を行いたい時もあるでしょう。ケースバイケースで使い分けてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags