|
由于 window.onload 事件需要在頁面所有內(nèi)容（包括圖片等）加載完后，才執(zhí)行，但往往我們更希望在 DOM 一加載完就執(zhí)行腳本。其實(shí)在現(xiàn)在大部分主流瀏覽器上（Firefox 3+，Opera 9+，Safari 3+，Chrome 2+）都提供了這一事件方法：addDOMLoadEvent。
document.addEventListener("DOMContentLoaded", init, false);
那對(duì)于 IE 我們?nèi)绾文M addDOMLoadEvent 事件呢？
Matthias Miller 最早提供了如下的解決方案：
// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/
而 Diego Perini 在其后提供了一種利用 doScroll() 方法來模擬 addDOMLoadEvent 事件的方案，且現(xiàn)在主流的 JavaScript 框架（JQuery、YUI等）基本都采用的這一解決方案。
原理基本如下：
當(dāng) ondocumentready 事件觸發(fā)，文檔（ document ）已經(jīng)完全解析和建立。如果組件需要操作最初的文檔結(jié)構(gòu)，初始化代碼需被安置在這之后。ondocumentready 事件告知組件，整個(gè)頁面已被加載，且在 初始文檔的 onload 事件觸發(fā)之前立即觸發(fā)。
一些方法，例如 doScroll，要求最初的文檔被完全加載。如果這些方法是初始化函數(shù)的一部分，當(dāng)ondocumentready 事件觸發(fā)，他們將被執(zhí)行。
/*
*
* IEContentLoaded.js
*
* Author: Diego Perini (diego.perini at gmail.com) NWBOX S.r.l.
* Summary: DOMContentLoaded emulation for IE browsers
* Updated: 05/10/2007
* License: GPL/CC
* Version: TBD
*
*/
// @w window reference
// @fn
function referencefunction IEContentLoaded (w, fn) {
var d = w.document, done = false,
// only fire once
init = function () {
if (!done) {
done = true;
fn();
}
};
// polling for no errors
(function () {
try {
// throws errors until after ondocumentready
d.documentElement.doScroll('left');
} catch (e) {
setTimeout(arguments.callee, 50);
return;
}
// no errors, fire
init();
})();
// trying to always fire before onload
d.onreadystatechange = function() {
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
};
}
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 模擬兼容性的addDOMLoadEvent事件 [1]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 模擬兼容性的addDOMLoadEvent事件 [1]
第 2 頁 
