解析頁面加載與js函數的執行

 這篇文章主要介紹了頁面加載與js函數的執行 onload or ready 需要的朋友可以過來參考下，希望對大家有所幫助

首先，頁面加載順序： 解析HTML結構。 加載外部腳本和樣式表文件。 解析並執行腳本代碼。 構造HTML DOM模型。 加載圖片等外部文件。 頁面加載完畢。   也就是： html → head → title → #text(網頁標題) → style → 加載樣式 → 解析樣式 → link → 加載外部樣式表文件 → 解析外部樣式表 → script → 加載外部腳本文件 → 解析外部腳本文件 → 執行外部腳本 → body → div → script → 加載腳本 → 解析腳本 → 執行腳本 → img → script → 加載腳本 → 解析腳本 → 執行腳本 → 加載外部圖像文件 → 頁面初始化完畢。   JS 的初始化裝載。   onload 不是在 document 加載完成的時候調用的, 而是在頁面所有元素 (包括圖片等) 全部加載完成才會調用.  如果頁面上有尺寸很大的圖片, 下載需要很長時間, 那麼腳本就一直不能被初始化, 直到圖片裝載完成, 嚴重時用戶體驗會受到很大影響.但是，window.onload 也並非是一無用處，很多情況下一些B/S軟件需要頁面全部加載後才提供用戶相關功能，這樣 window.onload 就可以提供一種“加載中”的功能，又或者是頁面內容很少，完全無需 document.ready(); 根據各種情況，應該合理的使用 onload 和 ready。   使用onload加載：   代碼如下: window.onload=function(){             var currentRenderer = 'javascript';                         FusionCharts.setCurrentRenderer(currentRenderer);             var chartObj = new FusionCharts({                 swfUrl: "Pie3D.swf",                 width: "290", height: "210",                 id: 'sampleChart',                 dataSource: "/ucenter/seo/new_seo_tool.php?check=xml&val={{pre_num}}",                 dataFormat: FusionChartsDataFormats.XMLURL,                           renderAt: 'chart1div'             }).render();             }   ready 在 W3C 中有個叫 DOMContentLoaded 的事件,它會在 DOM (文檔對象模型) 被加載完成的時候觸發.   方法一： 代碼如下: 類似於Jquery的$(function(){...}) $(document).ready(function(){...}) (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(){     alert('ok');  }   方法二：   代碼如下: /如果支持 W3C DOM2, 則使用 W3C 方法  if (document.addEventListener){      document.addEventListener("DOMContentLoaded", te, false);  } else if (/MSIE/i.test(navigator.userAgent)){/如果是 IE 浏覽器(不支持)      /創建一個 script 標簽, 該標簽有 defer 屬性, 當 document 加載完畢時才會被載入      document.write("     var script = document.getElementByIdx_x("__ie_onload");      /如果文檔確實裝載完畢, 調用初始化方法      script.onreadystatechange = function() {          if (this.readyState == 'complete') {          te();          }      }  } else if (/WebKit/i.test(navigator.userAgent)) {/如果是 Safari 浏覽器(不支持)  /創建定時器, 每 0.01 秒檢驗一次, 如果文檔裝載完畢則調用初始化方法  var _timer = setInterval( function() {      if (/loaded|complete/.test(document.readyState)) {          clearInterval(_timer);          te();      }      }, 10);  } else {/如果以上皆不是, 使用最壞的方法 (本例中, Opera 7 將會跑到這裡來)      window.onload = function(e) {          te();      } } function te(){     alert('ok'); }