【JS】jQueryでloadが効かない場合の対処法

今更な内容にはなりますが…。

jQueryでは2から3にバージョンが上がった際、load関数が廃止されたためon関数を使用して対処するようになりました。

…が、それでも上手くできない…。となったときの備忘録です。
まずは、load関数からon関数に書き換える方法と、他、注意事項を載せています。

on関数に書き換え

イベント関連の処理clickイベント同様に、各関数（load、unload、error）での書き方は使用できなくなり、on関数での記述になりました。

■2.Xの書き方

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

$(window).unload(function() {
  // ・・・処理
});

$(window).error(function() {
  // ・・・処理
});

■3.Xの書き方

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

$(window).on('unload', function() {
  // ・・・処理
});

$(window).on('error', function() {
  // ・・・処理
});

注意事項

注意事項ですが、load処理を行う際に以下のように $(function () {}); で囲ってしまうとエラーが起こってしまうので注意してください。 

$(function () {}); は $(document).ready(function() {}); と同じ処理で、ready処理はload処理とは実行するタイミングが異なるため、エラーになってしまいます。

■書き方

$(function () {
  // ・・・処理1
});

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

■エラー

$(function () {
  // ・・・処理1

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

★readとloadの違いの記事を書くかもしれません。