loadの使い方
loadは、ページ読み込みが完了した時に処理を実行出来ます。
以下は、例です。
【load利用例】
<script>
window.addEventListener("load", function(){alert("テストです");}, false);
</script>
上記は、ページが表示された時にアラートが表示されます。ページをリロードした時も同じです。
赤字部分は、無名関数で直接alertを記述していますが、func1等と関数を呼び出す事も出来ます。その時はwindow.addEventListener(load, func1, false);と記述します。func1の後に()がない点を留意して下さい。
ページ読み込み時にスクロールさせる
ページ読み込み時にスクロールさせる例です。
【ページ読み込み時にスクロールさせる例】
<script>
window.addEventListener("load", function(){window.scrollTo(0,100);}, false);
</script>
window.scrollToは横、縦のスクロール量をpxで指定します。このため、上記はページが100px下にスクロールして表示されます。
画像読み込み時に処理を実行する
以下のように、画像読み込み時に処理を実行させる事も出来ます。
【画像読み込み時に処理を実行させる例】
<img src="image/trump/11.png" alt="テスト画像" id="dom-load"/>
<script/>
var x = document.getElementById("dom-load");
x.addEventListener("load", function(){alert("テストです");}, false);
</script/>
赤字部分の1行目でid:dom-loadをオブジェクトとして参照し、2行目でloadイベントを登録しています。
iframeで別ファイルを読み込む時も、同様に使えます。
サポート
・サポートするブラウザ
以下は、最新バージョンでのサポート状況を示していますが、Internet ExplorerはOSによって使えるバージョンが異なるため、使えるバージョンを示しています。WindowsXPで使えるInternet Explorer8以降、全てのバージョンで使える場合は〇とします。
【サポートするブラウザ】
機種 |
ブラウザ |
サポート |
パソコン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
Microsoft Edge |
〇 |
Internet Explorer |
v9以上 |
スマートフォン |
Chrome |
〇 |
Safari |
〇 |
Firefox |
〇 |
・サポートするタグ
windowオブジェクト(ページ全体)以外でサポートするタグの一例は、以下の通りです。
<iframe>
<image>