window.onloadを使ってハマった件〜addEventListenerのloadを使おう

Google Chartsを使ってグラフを描画させようとしたところ、次のようなエラーが出て上手く動きませんでした。

DataTableはGoogle Chartsで使えうプロパティです。

エラーの意味としては「DataTableが定義されていないから使えない」ということですが、Google Chartsのライブラリ自体は正常に読み込まれています。
また、表示するページによってはエラーが表されない場合もあり、「読み込まれているのに使えないのはなぜ？」としばらくハマってしまいました。

状況からすると、ページ読み込み時ににGoogle Chartsのライブラリが読み込まれるより早いタイミングでdataTableを使うスクリプトが動くとしか考えられません。

ということで、グラフを描画する関数はwindows.onloadで読み込んでいたのですが、ここを変えることで解決しました。

window.onloadの代わりとしてページ読み込み時に使えるのは下記の2つが考えられます。

window.addEventListener("DOMContentLoaded",function() {
  //code
});

window.addEventListener("load",function() {
  //code
});

上記二つの違いは、

DomContentLoaded→DOMツリー構築完了時に呼び出される。

load→DOMツリー構築完了後、画像など全てのリソースの読込が終わった後に呼び出される

今回は全てのリソースが読み込まれてから処理をしたいのでloadにしてみたところ、正常に動くようになりました。

windows.onloadとwindow.addEventListener("load"〜の読み込みタイミングの違いがしっかりとは理解できていませんが、windows.onloadは他にも問題がある（複数書くと前に書いたものは処理されない）ので、なるべく使わないほうがよいかなと思います。

同じような事ではまっている人のお役に立てれば。