By U Zensen.

欲しいものはプログラミングで自分で作る。

JavaScriptでwindow.onloadの色々な書き方!!

2016 / 7 / 4 2016 / 8 / 7
JavaScript
window.onloadの書き方

はじめに!!

お疲れ様です!ぴーすけです!

JavaScriptで処理のタイミングを遅らせる方法として「window.onload」に処理を登録する方法があります。

今回はそのいろいろな書き方についてまとめたいと思います。

スポンサードリンク

書き方!!

JavaScript①

window.onload = function() { 処理 };

JavaScript②

window.addEventListener('load', function() { 処理 });

jQuery

$(window).on('load', function() { 処理 });

この3つの書き方はどれも同じタイミングで処理が動きます。

処理が実行されるタイミング!!

loadイベントに紐付いている処理は画面の表示が始まってから、HTMLの構造はもちろん、画像のロードなどが全て完了してから処理が走ります。

なので、JavaScriptで画像に対してなにか処理を行う場合などは、このloadイベントに処理を紐付けておかないと処理がうまくいかないことがあるので注意です。

一つだけ注意があります!!

以下の記述の時だけ注意があります。

JavaScript①

window.onload = function() { 処理 };

よく見ていただければわかると思うのですが、この記述は「windowオブジェクト」の「onloadという変数」に値(関数)を代入しているのです。

なので、以下のような場合には最後に代入した値に最終的には書き換わってしまうので、一番最後に代入した値(関数)のみが実行されます。

JavaScript①

window.onload = function() { alert("処理1"); }; window.onload = function() { alert("処理2"); }; window.onload = function() { alert("処理3"); }; //実行結果 処理3

他のwindow.addEventListener(‘load’, 処理);$(window).on(‘load’, 処理);の場合は複数の処理を紐付けておくことができるので、基本的にはこちらを使ったほうがいいと思います。

特に複数のメンバーで開発をしていた場合、他の人がwindow.onloadに入れていた処理を上書きしてしまう恐れがあるので、注意が必要です。

まとめ!!

HTMLの構造や画像が全て読み込まれた後に動く処理はloadイベントに処理を紐付けましょう!

ただ、window.onload = 処理;の形で処理を紐付ける際には注意が必要です!

Pocket

コメント

コメントを残す