2012年06月22日
onLoad よりも早く
今回は javascript のお話です。
要素が全部読込まれた後に実行させたいメソッドを定義するとき、
よくあるのは onLoad イベントで記述すると思います。
<body onload="javascript:initialize()">〜
または
// IE
if(document.attachEvent)
document.attachEvent('onload', initialize);
// Mozilla
if(document.addEventListener)
document.addEventListener('load', initialize, false);
onLoad イベントは、画像などのファイルが全部読込まれてから起動しますので、
イベント内で初期値を設定している場合、画面が表示されてから
勝手に入力項目に値が入ったような印象を受けます。
見た目も、ううむ、と考えさせられてしまいます。
回避策ですが、Mozilla 系では、DOMContentLoaded というイベントがあり、
要素が全部呼ばれたタイミングで起動するイベントがあります。
document.addEventListener('DOMContentLoaded', initialize, false);
これならば、より初期値が入っているような見た目を実現することが可能です。
IE ではどうするかというと、jQuery でもこうしているのですが、
doScroll が正常に実行できるかどうかを、
要素が全部読込まれたかの判定に使っているようです。
ここで initialize は、関数オブジェクトが格納された変数とします。
(function(){
if(initialize) {
try{
document.doScroll('left');
} catch(err) {
window.setTimeout(argument.callee, 0);
return;
}
initialize();
}
})();
function にしている理由をあらためて書いておきますが、
argument.callee でリトライする処理の範囲を決めておくためです。
doScroll に失敗した場合、catch で argument.callee が実行されるわけですが、
argument.callee = function で囲まれた部分と解釈してください。
また、画面構成によっては、onLoad が先に処理が終わってしまう場合があるそうなので、
以下のようなコードを入れておくと、より高速な処理ができると思います。
document.onreadystatechange = function() {
if (document.readyState == 'complete') {
initialize();
// doScroll の処理を実行しないようにするため、変数を無効化する
initialize = null;
}
};
要素が全部読込まれた後に実行させたいメソッドを定義するとき、
よくあるのは onLoad イベントで記述すると思います。
<body onload="javascript:initialize()">〜
または
// IE
if(document.attachEvent)
document.attachEvent('onload', initialize);
// Mozilla
if(document.addEventListener)
document.addEventListener('load', initialize, false);
onLoad イベントは、画像などのファイルが全部読込まれてから起動しますので、
イベント内で初期値を設定している場合、画面が表示されてから
勝手に入力項目に値が入ったような印象を受けます。
見た目も、ううむ、と考えさせられてしまいます。
回避策ですが、Mozilla 系では、DOMContentLoaded というイベントがあり、
要素が全部呼ばれたタイミングで起動するイベントがあります。
document.addEventListener('DOMContentLoaded', initialize, false);
これならば、より初期値が入っているような見た目を実現することが可能です。
IE ではどうするかというと、jQuery でもこうしているのですが、
doScroll が正常に実行できるかどうかを、
要素が全部読込まれたかの判定に使っているようです。
ここで initialize は、関数オブジェクトが格納された変数とします。
(function(){
if(initialize) {
try{
document.doScroll('left');
} catch(err) {
window.setTimeout(argument.callee, 0);
return;
}
initialize();
}
})();
function にしている理由をあらためて書いておきますが、
argument.callee でリトライする処理の範囲を決めておくためです。
doScroll に失敗した場合、catch で argument.callee が実行されるわけですが、
argument.callee = function で囲まれた部分と解釈してください。
また、画面構成によっては、onLoad が先に処理が終わってしまう場合があるそうなので、
以下のようなコードを入れておくと、より高速な処理ができると思います。
document.onreadystatechange = function() {
if (document.readyState == 'complete') {
initialize();
// doScroll の処理を実行しないようにするため、変数を無効化する
initialize = null;
}
};
【このカテゴリーの最新記事】
-
no image
-
no image
-
no image
-
no image
-
no image
posted by FJT at 07:08| javascript
