这篇文章主要介绍了页面加载与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'); }