Webサイトなどの画面の読み込みが完了してからJavascriptを実行したい時があると思います。(読み込まれてからじゃないとうまく動作しないことがあるため)
その処理を以下にまとめます。
Contents
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つともまとめて書いてみました。