可以在某些场合替代onload事件的domReady事件
生活随笔
收集整理的這篇文章主要介紹了
可以在某些场合替代onload事件的domReady事件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
load事件可以安全的執(zhí)行JS，因?yàn)樵撌录窃陧撁嫱耆虞d完后才開始執(zhí)行（包括頁面內(nèi)的圖片、flash等所有元素），不會因?yàn)镴S需要對某個(gè)DOM操作，而頁面還沒有加載該節(jié)點(diǎn)而引起錯(cuò)誤。但是這種安全是需要付出代價(jià)的：如果某些圖片（或者一些別的東西）加載特別慢，那么load事件會等到很久之后才會觸發(fā)。
針對這個(gè)問題，一些JS框架提供了一些補(bǔ)充方法。如：jquery的$(document).ready()、mootools的domready事件。都是在頁面的DOM加載完畢后立即執(zhí)行，而不需要等待漫長的圖片下載過程。
如果不使用這些框架，怎樣實(shí)現(xiàn)自己的 document ready呢？請看以下一段代碼：
Javascript代碼?? 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?已經(jīng)加載，馬上執(zhí)行函數(shù) ?? ????if?(__domReady.done)?return?f(); ?? ????//?假如我們已經(jīng)增加了一個(gè)函數(shù) ?? ????if?(__domReady.timer)?{ ?? ????????//?把它加入待執(zhí)行函數(shù)清單中 ?? ????????__domReady.ready.push(f); ?? ????}?else?{ ?? ????????//?為頁面加載完畢綁定一個(gè)事件， ?? ????????//?以防它最先完成。使用addEvent(該函數(shù)見下一章)。 ?? ????????__attach_event("load",?__isDOMReady); ?? ????????//?初始化待執(zhí)行函數(shù)的數(shù)組 ?? ????????__domReady.ready?=?[f]; ?? ????????//?盡可能快地檢查DOM是否已可用 ?? ????????__domReady.timer?=?setInterval(__isDOMReady,?100); ?? ????} ?? } ?? function?__isDOMReady()?{ ?? ????//?如果我們能判斷出DOM已可用，忽略 ?? ????if?(__domReady.done)?return?false; ?? ????//?檢查若干函數(shù)和元素是否可用 ?? ????if?(document?&&?document.getElementsByTagName?&&?document.getElementById?&&?document.body)?{ ?? ????????//?如果可用，我們可以停止檢查 ?? ????????__clear(__domReady.timer); ?? ????????__domReady.timer?=?null; ?? ????????//?執(zhí)行所有正等待的函數(shù) ?? ????????for?(?var?i?=?0;?i?<?__domReady.ready.length;?i++?)?{ ?? ????????????__domReady.ready[i](); ?? ????????} ?? ????????//?記錄我們在此已經(jīng)完成 ?? ????????__domReady.ready?=?null; ?? ????????__domReady.done?=?true; ?? ????} ?? }?? 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 已經(jīng)加載，馬上執(zhí)行函數(shù)
if (__domReady.done) return f();
// 假如我們已經(jīng)增加了一個(gè)函數(shù)
if (__domReady.timer) {
// 把它加入待執(zhí)行函數(shù)清單中
__domReady.ready.push(f);
} else {
// 為頁面加載完畢綁定一個(gè)事件，
// 以防它最先完成。使用addEvent(該函數(shù)見下一章)。
__attach_event("load", __isDOMReady);
// 初始化待執(zhí)行函數(shù)的數(shù)組
__domReady.ready = [f];
// 盡可能快地檢查DOM是否已可用
__domReady.timer = setInterval(__isDOMReady, 100);
}
}
function __isDOMReady() {
// 如果我們能判斷出DOM已可用，忽略
if (__domReady.done) return false;
// 檢查若干函數(shù)和元素是否可用
if (document && document.getElementsByTagName && document.getElementById && document.body) {
// 如果可用，我們可以停止檢查
__clear(__domReady.timer);
__domReady.timer = null;
// 執(zhí)行所有正等待的函數(shù)
for ( var i = 0; i < __domReady.ready.length; i++ ) {
__domReady.ready[i]();
}
// 記錄我們在此已經(jīng)完成
__domReady.ready = null;
__domReady.done = true;
}
}
具體的調(diào)用方法：
Javascript代碼__domReady(function()?{ ?? ????alert("The?dom?is?loaded!"); ?? });??
針對這個(gè)問題，一些JS框架提供了一些補(bǔ)充方法。如：jquery的$(document).ready()、mootools的domready事件。都是在頁面的DOM加載完畢后立即執(zhí)行，而不需要等待漫長的圖片下載過程。
如果不使用這些框架，怎樣實(shí)現(xiàn)自己的 document ready呢？請看以下一段代碼：
Javascript代碼
具體的調(diào)用方法：
Javascript代碼
轉(zhuǎn)載于:https://www.cnblogs.com/ie421/archive/2008/08/11/1264914.html
總結(jié)
以上是生活随笔為你收集整理的可以在某些场合替代onload事件的domReady事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C#编程利器之五:集合对象(Collec
- 下一篇： DIV同时使用两个class