ローディング中

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

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

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

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

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

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

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

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


<body onload="init();">

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

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を少し変更したりいじったりという場面が多々でてきますので、

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

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.