JavaScript よく使うload系イベント まとめ

2019年12月4日

自分がよく使うload系のイベントをまとめておきます。

DOMContentLoadedイベントとloadイベントの違い[タイミング]

HTMLをすべて読み込んだら実行される処理

DOMContentLoadedイベントはDOMツリーの構築が完了した時点で発火されます。

// HTMLをすべて読みこんだら実行される処理
window.addEventListener('DOMContentLoaded', (event) => {
 // ここに処理を記述
});

HTML側でjsファイルを読む際にdeferをつけてあったり、HTMLのbodyの最後にjsファイルのリンクがある場合にはいらないけれど、誰にどう使われても大丈夫なファイルを作る用に。

DOMContentLoaded イベント

画像などのリンクコンテンツも読み込んだら実行される処理

loadイベントはDOMツリーに加えて画像やすべてのスクリプトが読み込まれた時点で発火されます。

// 画像などのリンクコンテンツも読み込んだら実行される処理
window.addEventListener('load', (event) => {
 //ここに処理を記述
})

load event

リサイズ時

ぐにぐにブラウザを動かされたときに処理が走りすぎないように、タイマーで少し遅らせるのがポイントです。

// リサイズ時に行う初期化処理（windowサイズの再代入など）
function resizeInit() {
 // 処理
}

// 動的なリサイズは操作後0.2秒経ってから処理を実行する。
let resizeTimer;
window.addEventListener('resize', function() {
    clearTimeout(resizeTimer)
    resizeTimer = setTimeout(function () {
        resizeInit();
    }, 200)
})

cordingJavaScript

Posted by raccoon-admin