[Javascript] ページが読み込まれた後にコードを動かすイベント
どうもこんばんは！HYPのこうじです。
最近よく忘れるので、ここらでメモメモ。
コード読み込みの順序
通常スクリプトはもちろんhtmlもスタイルシートも上からずらずらと読み込まれます。
例えば以下のような書き方はエラーになります。
[html]
<script type="text/javascript">
// 要素を取得。
var e = document.getElementById(‘kami’);
// テキストを更新。
e.innerText = ‘神！’;
</script>
<span id="kami">俺は誰なんだ。</span>
[/html]
なんで？
上記で説明した通り、コードは上から順に読み込まれる為、スクリプトを動作させた段階では『kami』というIDを持った要素が存在しないからです。
正常に動かす為には、逆にするという方法もあります。
[html]
<span id="kami">俺は誰なんだ。</span>
<script type="text/javascript">
// 要素を取得。
var e = document.getElementById(‘kami’);
// テキストを更新。
e.innerText = ‘神！’;
</script>
[/html]
こうすると、スクリプト動作時にはkami要素は既に存在しているので、正常に動きます。
</body>の直前にスクリプトを書く
こうすれば、コードが全て表示されているので、上記で紹介したようなタイミングでのエラーは発生しないです。
が、スクリプトが膨大だったり、記事が膨大だったりすると『ページが表示されているのにスクロールが重くて動かない』と言ったこともあるかもしれません。
そういった場合は、体感早める為にスクリプトを下に書くよりは、<head />内に書いてローディング処理でもさせといた方がユーザーには親切かもしれませんね。
読み込み時のイベントリスナー色々
いっつもイベント名忘れるので、ここらでおさらい。
コード読み込み後に処理
コードが全て読み込まれた後(DOMが構築後)に処理が開始されます。
『ある要素の属性を取得したい』と言った場合や、『ある要素に追加して何かを追加したい』と言った場合に便利。
</html>まで行ったら処理が開始されるといった感じ？で非同期で読み込んでいるもの等は読み込み状況は無視。
そこらへんも考慮したい場合は後述のイベントを使用します。
Vanilla JS
[js]
document.addEventListener("DOMContentLoaded", function()
{
// DOM生成後に処理したい内容を書く。
});
[/js]
jQuery
[js]
$(function()
{
// DOM生成後に処理したい内容を書く。
});
[/js]
全てのデータ読み込み後に処理
上記の方法だと単純にDOM生成後に処理開始するので、例えば画像を全て読み込んだ後に処理したいと言った場合には不向きです。
そういう必要がある場合は、こちらのイベントを使います。
html内で必要な読み込みが全て終了したら処理されます。
Vanilla JS
[js]
window.addEventListener("load", function()
{
// 全て読み込みが完了した後に処理したい内容を書く。
});
[/js]
jQuery
[js]
$(window).load(function()
{
// DOM生成後に処理したい内容を書く。
});
[/js]
おわり
場合によりけりですが、重くない処理とかであればこれらのイベント使うよりも></body>直前に書いた方がいいです。コードも簡略出来ますし。
だけど、どちらで読み込んでも処理速度は一緒なので、数秒かかるスクリプト処理とかページが異常に長いとかの場合はページが表示されても結局スクリプト処理が終わる数秒は動作がガクガクになる場合が多いので、そういった場合は<head />内に書いて『数秒何も表示されない』か『ローディング処理』でもさせた方がイライラしないかも。
追記 – 2016.07.07
なんか調べたら『イベントハンドラ』と『イベントリスナー』は違うみたいです。
ま、結局はどちらもハンドルなはず！細かい人にはごめんなさい。
![コピペで使える！モール型ECサイトでのインラインフレーム活用法 [リファラー編]](https://hyp.llc/wp-content/themes/hyptheme/assets/images/lazy.png)