比windows.onload更早執行的方法
最近在學習jQuery,裡面牽涉到頁面的載入問題,無意中看到這篇文章,覺得很好,估計以後能夠用上,特意轉貼於下:
新的版本放棄使用document.write()（實際上我們依賴的是script標籤的defer觸發機制），主要基於如下幾個理由：
- XHTML不支援document.write
- 當頁面上的資源非常少時，會晚於window.onload
- document.write有時會覆寫我們原有的DOM
- document.write生成的script不能通過內部函式移除
外國javascript高手Diego Perini於是發掘了doScroll這個方法。在IE下，doScroll方法存在於所有標籤。但我搞來搞去,發現光是doScroll也不行，時不時就發現window.onload執行於domReady之前。只有結合onreadystatechange與doScroll這兩個方法，我們才能在IE中搞出與標準瀏覽器相同的結果。因此你在jQuery,Prototype,swfobject,Ext等類庫看到它們共同出現。而onreadystatechange其實也有些問題的，具體自己可能google一下，因此2006年左右實現domReady的程式碼基本依仗於document.write()。嗯，剩下的我就在程式碼間的註釋中說明吧，這樣更一目瞭解。
/*
take
from dom library version 1.0， inspired by jQuery
Copyright
2010-2011 (2011.2.27更新)
Dual
licensed under the MIT or GPL Version 2 licenses.
author
"司徒正美"
*/
var dom
= [];
//用於判定頁面是否載入完畢
dom.isReady
= false;
//用於新增要執行的函式
dom.ready
= function(fn){
if (
dom.isReady ) {
fn()
}else {
dom.push(
fn );
}
}
//執行所有在window.onload之前放入的函式
dom.fireReady
= function()
{
if (
!dom.isReady ) {
if (
!document.body ) {
return setTimeout(
dom.fireReady, 16 );
}
dom.isReady
= 1;
if (
dom.length ) {for(var i
= 0, fn;fn = dom[i];i++)
fn()
}
}
}
//開始初始化domReady函式，判定頁面的載入情況
if (
document.readyState === "complete" )
{
dom.fireReady();
}else if(-[1,]
){
document.addEventListener("DOMContentLoaded",function()
{
document.removeEventListener("DOMContentLoaded",
arguments.callee , false );
dom.fireReady();
},false
|