フォローする

デザイン案で window.onload を利用してはいけない理由

window.onload の処理には「予約」と「実行」の2工程あり、ブラウザのイベント発火タイミングで工程が切り替わります。

以下、図のように「予約」がブラウザのイベント発火タイミングに間に合わない場合、「実行」が行われません。

 

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

上記の理由から window.load をデザイン案で利用することはご遠慮ください。

前提: デザイン案 JavaScript での window Object 仕様

  • window object は存在しますが、中身が差し替わっています
    • console error を吐くだけの object に替わっています
  • ですので通常の window object としては機能しません

デザイン案エディタでの window.load 使用の自動検知

以下のコードを書いてエディタの「反映」ボタンを押すと、エラーダイアログが表示されます:

$(window).load(function(){
  console.log('hello');
});

__________2018-11-07_10.22.00.png

それを反映する事も出来ますが、その後も同コード中の callback function は実行されません

類似の NG コード記述

以下のような記述はすべてエディタでエラーの自動検知はしませんが、反映しても期待動作はしませんので、使用しないでください。

window の onload 等プロパティを設定する場合

window.onload = function(){
// ここに任意コードを記述
};

前述エディターの制限仕様をすり抜けて記述した場合

(function() {
  $(this).on('load', function(){
    // ここに任意コードを記述
  });
})(); 

GHライブラリを利用した場合

kzWindow.on("load", function() {
  // ここに任意コードを記述 
})();

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。