JS實現document.ready

通常我們想要在頁面內容加載完成后運行 JS 時，都會使用 window.onload 來處理，比如：

window.onload = function(){
  alert('Hello World!');
};

這段代碼將在頁面載入完成后彈出一個 "Hello World!" 的警告框，但是眾所周知，window.onload 的特點是頁面元素全部加載完成后才執行，比如頁面內有大量的圖片之類，當打開網頁時，其實相關的 DOM 已經全部加載完成，此時已經可以執行你想要執行的腳本了，可是圖片的加載速度要很慢於頁面的 HTML，這顯然在大多數情況下不是我們想要的。

 

jQuery 提供一個 $(document).ready(); 來解決此問題，當頁面 DOM 加載完成后，ready() 里的函數便會立即執行，但如果我們在不使用 jQuery 的情況下呢？
好了，廢話不多說，大家都明白想要什么，以下是來自國外網站的一段代碼，功能同等於 jQuery 的 $(document).ready();

看代碼：

(function () { 
var ie = !!(window.attachEvent && !window.opera); 
var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); 
var fn = []; 
var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); }; 
var d = document; 
d.ready = function (f) { 
if (!ie && !wk && d.addEventListener) 
return d.addEventListener('DOMContentLoaded', f, false); 
if (fn.push(f) > 1) return; 
if (ie) 
(function () { 
try { d.documentElement.doScroll('left'); run(); } 
catch (err) { setTimeout(arguments.callee, 0); } 
})(); 
else if (wk) 
var t = setInterval(function () { 
if (/^(loaded|complete)$/.test(d.readyState)) 
clearInterval(t), run(); 
}, 0); 
}; 
})(); 
document.ready(function(){ 
document.getElementById('test').innerHTML = 'document.ready test!'; //找到 
}); 
alert(document.getElementById('test')); //null 沒找到 

縮版 document.ready();

(function () {
   var ie =!!(window.attachEvent&&!window.opera),wk=/webkit\/(\d+)/i.test(navigator.userAgent)&&(RegExp.$1<525);
   var fn =[],run=function(){for(var i=0;i<fn.length;i++)fn[i]();},d=document;d.ready=function(f){
   if(!ie&&!wk&&d.addEventListener){returnd.addEventListener('DOMContentLoaded',f,false);}if(fn.push(f)>1)return;
   if(ie)(function(){try{d.documentElement.doScroll('left');run();}catch(err){setTimeout(arguments.callee,0);}})();
   else if(wk)var t=setInterval(function(){if(/^(loaded|complete)$/.test(d.readyState))clearInterval(t),run();},0);};
})();