概要
このページでは、デザイン案のJavaScriptタブに記述するコードにて、「window.onload($(window).load)」を記述してほしくないということ、またその理由や、問題の解決法について記載します。
また、グロースハッカーによるデザイン案を利用せず、ご自身でデザイン案作成をされるカスタマーの方も、こちらの記事に目を通されることをお勧めします。
目次
window.onload($(window).load)について
デザイン案エディタにwindow.onload($(window).load)を記述した場合
類似のNGコード記述集
window.onload($(window).load)の代替として、setTimeoutは使わないでください
解決法
window.onload($(window).load)について
window.onload($(window).load)の処理には「予約」と「実行」の2工程あり、ブラウザのイベント発火タイミングで工程が切り替わります。
以下、図のように「予約」がブラウザのイベント発火タイミングに間に合わない場合、「実行」が行われません。
元ページの処理が多かったり、PCやスマホの処理速度が遅かったり、ネットワーク回線速度が遅かったり、様々な原因でデザイン案の反映がブラウザのイベント発火タイミングに間に合わないことがあります。
イベント発火タイミングに間に合いませんと、 onload 内で実行するはずだったJSが実行されず、デザイン崩れや動作不具合の原因となります。
上記の理由から、「window.onload($(window).load)」をデザイン案で利用することは絶対におやめください。
補足: デザイン案JavaScriptでのwindow Object仕様
window object は存在しますが、console error を吐くだけの object に、中身が差し替わっています。
そのため、通常の window object としては機能しません。
デザイン案エディタにwindow.onload($(window).load)を記述した場合
以下のようなコードを書いてエディタの「反映」ボタンを押すと、エラーダイアログが表示されます。
$(window).load(function(){
console.log('hello');
});
このコードを 反映する事も出来ますが、その後も同コード中の callback function は実行されません 。
類似のNGコード記述集
以下のような記述はすべてエディタでエラーの自動検知はしませんが、反映しても期待動作はしませんので、使用しないでください。
また、コードチェックで下記のようなwindow.loadと類似の記述があった場合、一度コード内容を精査し、問題があると判断した場合は修正依頼を行っています。
NG例1: window の onload 等のプロパティを設定する場合
window.onload = function(){
// ここに任意コードを記述
};
NG例2: エディターの制限仕様をすり抜けて記述した場合
(function() { $(this).on('load', function(){ // ここに任意コードを記述 }); })();
NG例3: GHライブラリを利用した場合
kzWindow.on("load", function() {
// ここに任意コードを記述
})();
window.onload($(window).load)の代替として、setTimeoutは使わないでください
window.onload($(window).load)の記述、もしくは類似記述で差し戻しが行われた場合、setTimeout を記述される方も多いですが、こちらもNGです。
NGとなるsetTimeoutの用法例: ページ内要素の読み込みを待っている
setTimeoutで、ある要素の読み込みをn数待ったとしても、通信環境などによっては、n秒後に該当の要素が必ず読み込まれているとは限りません。
n秒後に該当要素が読み込まれていなかった場合、期待の動作をせず、デザイン崩れ・不具合の原因となります。
上記の理由のため、「要素が読み込まれるまでn秒待ってから処理をする」という実装はしないでください。
この実装がされていると判断した場合、再度修正依頼を行いますので、ご了承ください。
解決法
では、デザイン案のJavaScript実行時に要素が存在しないために、デザイン案の反映が行われない場合に、どういった記述を行うのがいいかを説明します。
setInterval を利用し、n秒ごとに、該当の要素があるかを確認、要素が読み込まれた時に処理をするようにしてください。
例: ページ内に、<a class="link" href="○○">リンク</a> という要素があり、そこに変更を加えたいが、リンクがページ内のスクリプトなどで非同期的に挿入されている場合
この場合、デザイン案のJavaScript実行時には、要素が存在しておらず、意図したように変更を加えられないケースがあります。
そういった場合は、以下のようなコードで、要素の出現を監視しましょう。
//デザイン案JavaScriptタブ
//300ミリ秒ごとに要素があるか見る
var timerId = setInterval(findTargetElement, 300);
function findTargetElement(){
var elem = $("a.link");
if(elem.length > 0){
//処理を書く
clearInterval(timerId);
}
}
※コードは一例です。案件に合わせた、具体的なコードの作成・提示はサポート外となりますのでご了承ください。
0 コメント