【Javascrpt】ページ読み込み時に「Javascript」を実行する方法

【Javascrpt】
ページ読み込み時に「Javascript」を実行する方法

「Javascript」をページ読み込み時に実行したい時は、
・「onLoad」属性を使う方法
・「addEventListener」を使う方法
などの方法があります。
「addEventListener」を使う方法には、
「load」と「DOMContentLoaded」などのタイミングがあります。

INDEX

■ ページ読み込み時にJavascriptを実行する方法
■ 「onLoad」を使う方法
■ 「addEventListener」を使う方法
■ 「jQuery」の「ready」と「load」を使う方法
■ 画像の読み込み方法

ページ読み込み時にJavascriptを実行する方法

「Javascript」では、
ページ読み込み時に実行できる方法がいくつかあります。

・「onLoad」を使う方法
・「addEventListener('load', 関数名 )」を使う方法
・「addEventListener('DOMContentLoaded', 関数名 )」を使う方法
・「jQuery」の「ready」と「load」
などの方法が用意されている。

Back

「onLoad」を使う方法

すべてのDOMツリー構造及び関連リソースが読み込まれたあとにJavaScriptが実行される記述

複数の「window.onload」を書いた場合、
上書きされてしまい、最後に書いたイベントだけしか実行されない。

複数の処理を実行したい場合は、「addEventListener()」使うと、
登録された処理は、登録された順番に実行される。

Back

「addEventListener」を使う方法

window.addEventListener('load', function() {
console.log('出力したいテキスト');
})

window.addEventListener('DOMContentLoaded', function() {
実行プログラムを記述
})

ページ読み込み時に実行するように設定できる「addEventListener」は、
・「addEventListener('load', 関数名)」
・「addEventListener('DOMContentLoaded', 関数名)」
の２通りの方法がある。
「DOMContentLoaded」は、
DOMが読み込まれた時点で実行するので、
画像の読み込みなど、
全ての読み込みが完了してから実行される「load」よりも、
実行速度が早い。

「addEventListener」は
複数の「onloadイベント」を登録できるのが特徴で、
複数記述されると上書きされてしまう「onLoad」よりも、
多くの処理を登録できるので、便利。
登録順に処理が実行されるようになっている。
複数の「onloadイベント」を登録してもすべて実行される。

「DOMContentLoaded」を設定すると「DOMツリー構造」が読み込まれた時点で実行される。
ほとんどの場合、「DOMツリー構造」さえ完了していれば「JavaScript」から「DOM」を取り扱える。
通常の「onload」イベントよりも速く動作するというメリットがある。

「DOMContentLoaded」は、
「jQuery」の「ready()」メソッドとほとんど同じ動作をする。
「DOMContentLoaded」は主に、
標準のJavaScriptイベントで利用され、
HTML構造が読み込まれたらプログラムを実行する。
注意点は、「DOMContentLoaded」はIE9から対応。

Back

「jQuery」の「ready」と「load」を使う方法

$(document).ready(function(){
実行プログラムを記述
});

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() {

$('h1').text('タイトル文字');

})
</script> </head> <body> <h1>置き換えられる前のタイトル文字</h1> </body> </html>

省略前の記述

function showLog() {
console.log('HTMLが読み込まれました！');
}
$(document).ready(showLog);

省略後の記述

$(function() {
//ここに処理を書く
});

$(関数名);

「jQuery」の「ready()」は、
ページ読み込み時に、
HTMLの構造が組み立てられた後、
すぐに処理を実行することができるメソッド。

「HTML」が全て読み込まれる前に、
「jQuery」は実行されるので、
読み込まれていないHTMLを指定するとエラーになる。

読み込み前の要素を指定することを避ける方法が、
「jQuery」の「ready()」。

load()の使い方

$('img').on('load', function() {
実行プログラムを記述
})

//ready()メソッドの場合 $(document).ready(function() {
実行プログラムを記述
});

//loadイベント処理の場合 $(window).on('load', function() {
実行プログラムを記述
});

「load()」メソッドは、
load()メソッドを単体で使用することはなく、
「on()」メソッドのloadイベント処理として記述することになる。
「loadイベント」を設定すると、
指定したHTML要素の読み込みが完了した時点で処理を実行する。
時間のかかる容量の大きな画像ファイルなどでも、
ブラウザが読み込み完了するまで、プログラムを実行しない。
「load」イベントを記述しておけば、
最後まで読み込まれてから処理が実行される。

ready()が動かない場合の対処例

$('h1').text('hello'); ↓
jQuery('h1').text('hello');

「$」を他のプラグインやライブラリなどでも利用されている場合、
「jQuery」で正しく動作しないことがある。
「jQuery」の対処法は、「$」を「jQuery」に置き換えることで、
正常に機能するようになっている。
次のサンプル例を見てください！

Back

画像の読み込み方法

画像の読み込みにも使える「onLoad」「addEventListener」。
画像を読み込むのは時間がかかるので、
読み込みが完了してからでないと、
処理が実行できない。
そんな時に、「onLoad」「addEventListener」を利用して、
画像読み込みが完了したかどうかチェックしてからの実行処理を行う。

var img = new Image(); //インスタンスの生成
img.src = 'image/sample.jpg'; //画像ファイルの読み込み
document.body.appendChild(img); //画像を追加・表示

var img = new Image();
img.onload = function() {
//画像の読み込み完了後の実行プログラム
};

var img = new Image();
img.src = 'image/sample.jpg';
document.body.appendChild(img);

img.addEventListener('load', function {
// 画像の幅サイズを出力
console.log(img.width);
};

Back

「onbeforeunload」イベントの使い方

「onbeforeunload」イベントは、
「onloadイベント」の逆で、
ページから離脱するときのイベント処理を記述する。

主に、「Webページをリロード」「別のURLに遷移する」時などに実行されるイベントで、
「離脱防止」や「誤ったリロード」を防止するような目的で使われることが多い。

Back