プログラミング★さがして！

JavaScript_EventHandlers ＞ window.onload

window.onloadとは？ †

WebページのHTMLの読み込みが完了したときに実行されるイベントハンドラーです。

↑

書式 †

window の load イベントに対応するイベントハンドラです。

構文

window.onload = funcRef;

funcRef : load イベント発生時に呼び出す関数への参照または関数式

↑

サンプルコード †

「window.onload」という命令文？がどういう場面で使うのかと疑問に思いました。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <script>
        window.onload = function () {
            var str = "";
            var day = new Date().getDay();
            switch (day) {
                case 0:
                    str = "日"; break;
                case 1:
                    str = "月"; break;
                case 2:
                    str = "火"; break;
                case 3:
                    str = "水"; break;
                case 4:
                    str = "木"; break;
                case 5:
                    str = "金"; break;
                case 6:
                    str = "土"; break;
            }
            document.getElementById("day").textContent = str;
        }
    </script>
</head>
 
<body>
    <h1>今日は<span id="day"></span>曜日</h1>
</body>
 
</html>

HTMLは上から順に処理されていきます。
headの中にスクリプト書くと、headが読まれる時点でスクリプトが実行されます。
その時点ではまだbodyは存在しないので、

document.getElementById("day").textContent = str;

を実行するとエラーになります。
その後で、bodyが解釈されて「今日は曜日」と表示されます。

window.onload = function()～～～

と書くことで、headの解釈時点で、「htmlの解釈が全部終わってページが表示されてからfunctionを実行する」というのを予約することになります。
この場合、functionの中身が実行される時点ですでに「今日は曜日」と表示されているので、

document.getElementById("day").textContent = str;

が成功します。

↑

window.onloadの欠点＝実行が遅いこと †

ブラウザは上から順番に実行する。<script>タグを見つけたら優先的に実行しようとするので書き方によってはHTMLの要素が作られる前にJavaScriptを実行してしまうのでエラーになる場合がある。
そこでwindow.onloadと書くことでHTMLの読み込みが完了してから実行される。

コメント　alucky0707　2014-07-15 16:26

window.onload = function () {
  // ここに読み込み完了時に実行してほしい内容を書く。
};

という方法が考えられますが、このwindow.onloadという方法は今となっては少し古い方法になりますし、これはHTML 文書（≒画像などの読み込みも含む）が読み終わったところで実行されるので、実行のタイミングが予想よりも遅くなってしまう可能性があり、あまり良い方法とは言えないでしょう。

↑

window.onloadの改善策（代替案） †

window.onload の処理には「予約」と「実行」の2工程あり、ブラウザのイベント発火タイミングで工程が切り替わります。
以下、図のように「予約」がブラウザのイベント発火タイミングに間に合わない場合、「実行」が行われません。

mceclip0.png

元ページの処理が多かったり、PCやスマホの処理速度が遅かったり、ネットワーク回線速度が遅かったり、様々な原因でデザイン案の反映がブラウザのイベント発火タイミングに間に合わないことがあります。
イベント発火タイミングに間に合いませんと、 onload 内で実行するはずだったJSが実行されず、デザイン崩れや動作不具合の原因となります。
上記の理由から window.load をデザイン案で利用することはご遠慮ください。

↑

HTML読込完了のイベント発生の代わりに、HTML要素の出現を常時監視する方法 †

''解決法'
setIntervalを利用し、n秒ごとに、該当の要素があるかを確認、要素が読み込まれた時に処理をするようにしてください。
例)
例えば <a class="link" href="○○">リンク</a> という要素があり、そこに変更を加えたいが、リンクがページ内のスクリプトなどで非同期的に挿入されている場合、デザイン案反映時には存在しておらず、意図したように変更を加えられない場合があります。
そういった場合は、以下のようなコードで、要素の出現を監視しましょう。

Everything is expanded.Everything is shortened. 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10

 
 
 
-
|
-
|
|
!
!

//300ミリ秒ごとに要素があるか見る
var timerId = setInterval(findTargetElement, 300);
 
function findTargetElement(){
   var elem = $("a.link");
   if(elem.length > 0){
     //処理を書く
     clearInterval(timerId);
   }
}
↑

jQueryの場合 †

jQueryを使っている場合は、window.loadを使う代わりに、以下のように書きます。

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

Vue.jsの場合 †

Vue.jsを使っている場合は、window.loadを使う代わりに、以下のように書きます。

（参考）

一般的にjava scriptでウィンドウ読むときは

window.onload = function() {
  alert('Hello World!');
};

と書きます。

これを、Vue.jsに適用させる場合は、

methods: {
  window:onload = function() {  
   alert('koko');
  },
}

と書きます。

window.onload、window:onload
.と:の違いでした。



window.onloadを使う場合は、欠点を理解した上で使用しましょう。

添付ファイル: filemceclip0.png 366件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-08-10 (土) 10:03:07 (1715d)