Javascript をページ読み込み時に実行したい時のあれこれ

加古川に引っ越してきて２ヶ月目。

未だに駅前のスーパーの名前がはっきりと覚えられないマンノです。

マルまでは覚えれたんですけど後二文字が覚えきれない。

私の記憶力では１ヶ月１文字が限界です。

さて前回のAnimate CCとも関連するJavascriptの読み込みタイミングについてポチポチ書いていきたいと思います。

Javascriptの実行タイミングについて

Javascriptをページ読み込み時に実行したい場合などは


&lt;body onload="init();"&gt;

と記入することで実行することができます。

Animate CCなどで生成されるHTMLには上記のように書かれていますが、init();の部分を好きな関数なんかに変更することで任意の処理を実行することが可能になります。

ですがhtmlには書かずにJavascriptに直接書いてまとめてしまいたいということもありますよね。

そんな時は

window.onload = function()

{
    init();
};

と書いてあげれば同じ効果を得ることができます。

またdocument.body.onloadなども使えますがブラウザによっては、処理が異なることもあるためwindow.onloadが無難なように思います。

アニメーションなんかが一つしかない時などは<body onload="init();">でも問題ないのですが

複数のアニメーションを一つのページに実装したい時などにHTMLの方に書いていくと、メンテナンスなどが面倒なのでJSでまとめちゃうほうが個人的にはおすすめです。

複数のアニメーションや、読み込み時に実行したいJavascriptが混在する場合は、関数を弄る必要があります。

window.onload = function()

{
    init();
    init2();
};

といったようにinit();の部分が競合しないように分けて上げる必要があります。

そうしないと競合して思ったように動作しません。

その点だけ気をつけるようにしましょうね。

Animate CCで作ったアニメーションを実装する時などに

Javascriptを少し変更したりいじったりという場面が多々でてきますので、

簡単にでも読み書きできれば良いんだろうなって最近ひしひしと感じます。

勉強すればもっと色々な表現できるようにもなると思うので日々勉強していきたいと思います。