onloadイベントのdomReadyイベントを場合によっては置き換えることができます
2216 ワード
loadイベントは、ページが完全にロードされた後(ページ内のピクチャ、flashなどのすべての要素を含む)実行を開始するため、JSがDOM操作を必要とし、ページがノードをロードしていないためエラーを引き起こすことなく、JSを安全に実行できます.しかし、このセキュリティには代価が必要です.一部の画像(または他のもの)のロードが特に遅い場合、loadイベントは長い間待ってからトリガーされます.
この問題に対して、いくつかのJSフレームワークはいくつかの補足方法を提供しています.例:jqueryの$(document).ready()、mootoolsのdomreadyイベント.いずれもページのDOMロードが完了するとすぐに実行され、長い画像ダウンロードプロセスを待つ必要はありません.
これらのフレームワークを使わなければ、どのように自分のdocument readyを実現しますか?次のコードを参照してください.
特定の呼び出し方法:
この問題に対して、いくつかのJSフレームワークはいくつかの補足方法を提供しています.例:jqueryの$(document).ready()、mootoolsのdomreadyイベント.いずれもページのDOMロードが完了するとすぐに実行され、長い画像ダウンロードプロセスを待つ必要はありません.
これらのフレームワークを使わなければ、どのように自分のdocument readyを実現しますか?次のコードを参照してください.
function __clear(timer){
clearTimeout(timer);
clearInterval(timer);
return null;
};
function __attach_event(evt, callback) {
if (window.addEventListener) {
window.addEventListener(evt, callback, false);
} else if (window.attachEvent) {
window.attachEvent("on" + evt, callback);
}
}
function __domReady(f) {
// DOM ,
if (__domReady.done) return f();
//
if (__domReady.timer) {
//
__domReady.ready.push(f);
} else {
// ,
// 。 addEvent( )。
__attach_event("load", __isDOMReady);
//
__domReady.ready = [f];
// DOM
__domReady.timer = setInterval(__isDOMReady, 100);
}
}
function __isDOMReady() {
// DOM ,
if (__domReady.done) return false;
//
if (document && document.getElementsByTagName && document.getElementById && document.body) {
// ,
__clear(__domReady.timer);
__domReady.timer = null;
//
for ( var i = 0; i < __domReady.ready.length; i++ ) {
__domReady.ready[i]();
}
//
__domReady.ready = null;
__domReady.done = true;
}
}
特定の呼び出し方法:
__domReady(function() {
alert("The dom is loaded!");
});