基本上每個(gè)庫都有這東西瓢捉，因?yàn)槿绻獙撁嫔系脑剡M(jìn)行操作逼裆，我們必須等到頁面加載了這個(gè)元素才行橱乱，否則會報(bào)錯(cuò)辜梳，但是我們很能判定某個(gè)元素是否已加載，但我們可以判定頁面是否加載泳叠，這就是我們經(jīng)常把代碼放到window.onload = function(){}之中的緣由作瞄。但window.onload事件是待到頁面上的所有資源被加載才激活，如果頁面上有許多圖片危纫，音樂或falsh宗挥，而我們要操作的元素在的它們的下方呢？因此种蝶，W3C做了少有幾樁好事契耿，搞了DOMContentLoaded與addEventListener，可能也不是他們搞的螃征，把某瀏覽器的私有實(shí)現(xiàn)蓋上個(gè)大印搪桂，標(biāo)明它是標(biāo)準(zhǔn)罷了，如safari的canvas盯滚，IE的getBoundingClientRect……DOMContentLoaded是DOM樹完成時(shí)激活的事件踢械，addEventListener支持多重加載與冒泡捕獲拙泽。本文將在它的基礎(chǔ)上進(jìn)行進(jìn)一步的封裝與改進(jìn)，如setTimeout改為零秒延遲裸燎，清除setTimeout顾瞻，執(zhí)行完加載后把加載函數(shù)清除掉，對IE框架結(jié)構(gòu)的頁面進(jìn)行更安全的設(shè)置……
綜合執(zhí)行順序?yàn)椋?/h4>
1. oncontentready德绿，這時(shí)DOM樹完成
2. script defer荷荤，這時(shí)開始執(zhí)行設(shè)定了defer屬性的script
3. ondocumentready complete，這時(shí)可以使用HTC組件與XHR
4. html.doScroll 這時(shí)可以讓HTML元素使用doScroll方法
5. window.onload 這時(shí)圖片flash等資源都加載完畢
// Js 代碼
// DOM ready
function domReady(){
new function(){
dom = [];
dom.isReady = false;
dom.isFunction = function(obj){
return Object.prototype.toString.call(obj) === "[object Function]";
}
dom.Ready = function(fn){
dom.initReady();//如果沒有建成DOM樹移稳，則走第二步蕴纳，存儲起來一起殺
if(dom.isFunction(fn)){
if(dom.isReady){
fn();//如果已經(jīng)建成DOM，則來一個(gè)殺一個(gè)
}else{
dom.push(fn);//存儲加載事件
}
}
}
dom.fireReady =function(){
if (dom.isReady) return;
dom.isReady = true;
for(var i=0,n=dom.length;i<n;i++){
var fn = dom[i];
fn();
}
dom.length = 0;//清空事件
}
dom.initReady = function(){
if (document.addEventListener) {
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加載函數(shù)
dom.fireReady();
}, false );
}else{
if (document.getElementById) {
document.write("<script id=\"ie-domReady\" defer='defer'src=\"http://:\"><\/script>");
document.getElementById("ie-domReady").onreadystatechange = function() {
if (this.readyState === "complete") {
dom.fireReady();
this.onreadystatechange = null;
this.parentNode.removeChild(this)
}
};
}
}
}
}
dom.Ready(function(){
alert("我的domReady个粱！")
});
dom.Ready(function(){
alert("我的domReady測試多重加載1古毛！")
});
dom.Ready(function(){
alert("我的domReady測試多重加載2!")
});
dom.Ready(function(){
alert(document.getElementById("test").innerHTML)
});
window.onload = function(){
alert("這是onload事件！")
};
}
// html 代碼
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head id="head">
<meta charset="utf-8"/>
<title>jQuery的domReady </title>
<script type="text/javascript" src="common.js">
</script>
</head>
<body>
<table class="filament_table" cellspacing="0" width="700" rules="cols" >
<col class="grey" width="25%"></col>
<col class="yellow"></col>
<thead>
<tr>
<th>
參數(shù)
</th>
<th>
描述
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
scrollbarDown
</td>
<td>
Default. Down scroll arrow is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarHThumb
</td>
<td>
Horizontal scroll thumb or box is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarLeft
</td>
<td>
Left scroll arrow is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarPageDown
</td>
<td>
Page-down scroll bar shaft is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarPageLeft
</td>
<td>
Page-left scroll bar shaft is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarVThumb
</td>
<td>
Vertical scroll thumb or box is at the specified location
</td>
</tr>
<tr>
<td>
down
</td>
<td>
Composite reference to scrollbarDown
</td>
</tr>
<tr>
<td>
left
</td>
<td>
Composite reference to scrollbarLeft
</td>
</tr>
</tbody>
</table>
<p id="test">我們添加了些圖片與表格延緩頁面的加載速度</p>
</body>
</html>
// Js 代碼
// DOM ready
function domReady(){
new function(){
dom = [];
dom.isReady = false;
dom.isFunction = function(obj){
return Object.prototype.toString.call(obj) === "[object Function]";
}
dom.Ready = function(fn){
dom.initReady();//如果沒有建成DOM樹移稳，則走第二步蕴纳，存儲起來一起殺
if(dom.isFunction(fn)){
if(dom.isReady){
fn();//如果已經(jīng)建成DOM，則來一個(gè)殺一個(gè)
}else{
dom.push(fn);//存儲加載事件
}
}
}
dom.fireReady =function(){
if (dom.isReady) return;
dom.isReady = true;
for(var i=0,n=dom.length;i<n;i++){
var fn = dom[i];
fn();
}
dom.length = 0;//清空事件
}
dom.initReady = function(){
if (document.addEventListener) {
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加載函數(shù)
dom.fireReady();
}, false );
}else{
if (document.getElementById) {
document.write("<script id=\"ie-domReady\" defer='defer'src=\"http://:\"><\/script>");
document.getElementById("ie-domReady").onreadystatechange = function() {
if (this.readyState === "complete") {
dom.fireReady();
this.onreadystatechange = null;
this.parentNode.removeChild(this)
}
};
}
}
}
}
dom.Ready(function(){
alert("我的domReady个粱！")
});
dom.Ready(function(){
alert("我的domReady測試多重加載1古毛！")
});
dom.Ready(function(){
alert("我的domReady測試多重加載2!")
});
dom.Ready(function(){
alert(document.getElementById("test").innerHTML)
});
window.onload = function(){
alert("這是onload事件！")
};
}
// html 代碼
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head id="head">
<meta charset="utf-8"/>
<title>jQuery的domReady </title>
<script type="text/javascript" src="common.js">
</script>
</head>
<body>
<table class="filament_table" cellspacing="0" width="700" rules="cols" >
<col class="grey" width="25%"></col>
<col class="yellow"></col>
<thead>
<tr>
<th>
參數(shù)
</th>
<th>
描述
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
scrollbarDown
</td>
<td>
Default. Down scroll arrow is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarHThumb
</td>
<td>
Horizontal scroll thumb or box is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarLeft
</td>
<td>
Left scroll arrow is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarPageDown
</td>
<td>
Page-down scroll bar shaft is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarPageLeft
</td>
<td>
Page-left scroll bar shaft is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarVThumb
</td>
<td>
Vertical scroll thumb or box is at the specified location
</td>
</tr>
<tr>
<td>
down
</td>
<td>
Composite reference to scrollbarDown
</td>
</tr>
<tr>
<td>
left
</td>
<td>
Composite reference to scrollbarLeft
</td>
</tr>
</tbody>
</table>
<p id="test">我們添加了些圖片與表格延緩頁面的加載速度</p>
</body>
</html>
