Javascript

Javascriptで画面が読み込まれたら実行される処理の定型文まとめ(コピペ用)

Javascript

Webサイトなどの画面の読み込みが完了してからJavascriptを実行したい時があると思います。(読み込まれてからじゃないとうまく動作しないことがあるため)

その処理を以下にまとめます。

Vanilla Javascript 読み込み時処理 (シンプルなJavascript)

特に理由がなければ1つ目に紹介する方を使うのが一般的です。

コード(ソースが読み込まれたら)

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

コード(ソース+画像などが読み込まれたら)

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

上記がtoken errorになったら

「});」の部分でエラー吐かれたりすることがあったので、こちらが重宝しています。

if (document.readyState !== 'loading') {
    // code
} 

jQuery 読み込み時処理

特に理由がなければ1つ目に紹介する方を使うのが一般的です。

コード(ソースが読み込まれたら)

$(document).ready(function(){
    // code
});

コード(ソース+画像などが読み込まれたら)

$(window).on('load', function() {
    // code
});

終わり

それぞれのコードはネットですぐ出てくるのですが、記事を書いたりする時にJavascriptとjQueryの比較をする際にどちらも合わせて使うので2つともまとめて書いてみました。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です