javascript 替換 window.onload 的 document.ready

一般咱們想要在頁面內容加載完成後運行 JS 時,都會使用 window.onload 來處理,好比:javascript

window.onload = function(){java

     alert('Hello World!');
};

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

jQuery 提供一個 $(document).ready(); 來解決此問題,當頁面 DOM 加載完成後,ready() 裏的函數便會當即執行,但若是咱們在不使用 jQuery 的狀況下呢?
好了,廢話很少說,你們都明白想要什麼,如下是來自國外網站的一段代碼,功能同等於 jQuery 的 $(document).ready();
 
頁面內容加載完成後運行js
window.onload = function(){
     //code
};

當頁面DOM加載完成後運行js
(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){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);};
})();
相關文章
相關標籤/搜索