load/JavaScript

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以降、全てのバージョンで使える場合は〇とします。

・サポートするタグ

　windowオブジェクト(ページ全体)以外でサポートするタグの一例は、以下の通りです。

　<iframe>

　<image>

「イベントリスナー一覧」に戻る