<body onload="alert('hello')">window.onload = function(){alert('hello');};
当window.onload事宜触发时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成了。
//window.onload不能同时编写多个。//以下代码无法精确实行，结果只输出第二个。window.onload = function(){ alert("test1");};window.onload = function(){ alert("test2");};//$(document).ready()能同时编写多个//结果两次都输出$(document).ready(function(){ alert("Hello World"); }); $(document).ready(function(){ alert("Hello again"); });
window.onload和body中onload也有些许差异：
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script> <script language="javascript"> window.onload = haha; function haha(){console.log("window.onload");} if(document.addEventListener){ function DOMContentLoaded(){ console.log("DOMContentLoaded"); } document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); }</script></head><body onload="console.log('bodyonload');"> <div id="div1">a</div></body></html>
在IE10和FireFox下，结果为 ：
"DOMContentLoaded""bodyonload"
解释body中的onload会覆盖window.onload
在chrome下，结果为：
DOMContentLoadedwindow.onloadbodyonload
然后，如果把javascript代码移到最下面，结果又会是什么样呢？
chrome和IE10、FireFox的结果竟然是一样的：
DOMContentLoadedwindow.onload
IE 10、Fire Fox可以理解，window.on load和body中的 on load 谁不才面便是谁覆盖谁，只会实行后面的那个。
4 DOM ContentLoaded嵌入onload方法可能须要等待韶光，而本方法可以在完成HTML解析后发生的事宜，减少等待韶光。
在chrome、IE10和FireFox中，实行结果是：DOMContentLoaded然后才是onload的输出。以是说一样平常情形下，DOMContentLoaded事宜要在window.onload之前实行，当DOM树构建完成的时候就会实行DOMContentLoaded事宜。
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="jquery2.js"></script> <script language="javascript"> window.onload = haha; function haha(){console.log(document.getElementById("div1"));} if(document.addEventListener){ function DOMContentLoaded(){ console.log("DOMContentLoaded"); } document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); } </script></head><body> <div id="div1">a</div></body></html>
如果你是个jQuery利用者，你可能会常常利用$(document).ready();或者$(function(){})，这都是利用了DOMContentLoaded事宜
5 动态载入JavaScript文件5.1 利用原生js方法
动态创建script标签，并指定script的src属性
function loadJs(url, callback) { var script = document.createElement('script'); script.type = "text/javascript"; if (typeof(callback) != "undefined") { if (script.readyState) { script.onreadystatechange = function() { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } } } else { script.onload = function() { callback(); } } } script.src = url; document.body.appendChild(script);}loadJs("test.js", function() { alert('done');});
还可以利用同样的事理动态加载css文件，只不过插入的的父节点是head标签。
5.2 利用document.write/writeln(）办法
该种办法可以实现js文件的动态加载，事理便是在重写文档流，这种办法会导致全体页面重绘。
document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");
须要把稳的是分外字符的转义。
5.3 利用jQuery
利用getScript(url,callback)方法实现动态加载js文件
$.getScript('test.js',function(){ alert('done');});
－End－
