JavaScriptの「onload」は便利!だけど多用するときは注意が必要

JavaScriptの「onload」は便利!だけど多用するときは注意が必要ページの読み込み時にJavaScriptの関数を呼び出す「onload」は便利ですが、あれこれカスタマイズしているうちに一部の機能が動かなくなるなど、動作が変になる場合があります。

そんなときにまず確認したいことは、「onload」を複数使っていないかということ。

onloadを2つ以上使った場合

基本的にこの「onload」は1つしか使うことができません。2つ以上使った場合、最後に読み込まれた「onload」で呼び出された関数が実行されます。その結果、それ以前に読み込んだ関数はすべて実行されなくなってしまいます。そうすると、すべて「onload」で呼び出しているはずの関数が、実行されるものと実行されないものと混在してしまい、動作が変になってしまうのです。

回避方法

回避方法の大原則は、「onload」を複数使わない。これに限ります。そうすればページ読み込み時に実行する関数の管理が楽になりますし、スクリプト内での競合などのトラブルに対するリスクを減らすことができます。

もし複数回使いたい、使わなければいけないのなら、対処法として1つの「onload」の中に、実行する関数をまとめる方法があります。そうすれば「onload」自体は1回で済みますし、そこから呼び出す関数は自由に設定することができます。