今天在看脚本加载的顺序,想探讨一下window.load和document.body.load和$(function(){})的执行顺序。我也没太研究明白,希望大神帮我一下,指明我前进的方向。我先谢了,我这想探讨的是为什么会出现这种情况,而不是说用哪种方式去实现加载,或者说规避这种情况。
浏览器使用Firefox32.0.3,Chrome39.0.2160.2,内核是31.0.1650.63版本的是360浏览器。我在stackoverflow上也查了一下,没有获得比较满意的答案。
jquery的
$(function(){})
首先加载是没有任何疑问的,$(function(){})的执行是在DOM准备好之后执行。
window.onload是在页面加载完成之后,包括加载完各种js、css、image资源才执行。
document.body.load或者直接在body标签上加onload()方法,是在页面加载到body的时候执行的。
也有可能我理解不正确,请批评指正。
在这三款浏览器中发现有些不同的现象。
代码1:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test2</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> window.οnlοad=function(){ console.log("window onload"); } function init(){ console.log("body init"); } $(function(){ console.log("dom ready="+$('#span').html()); }) </script> </head> <body οnlοad="init()"> <span id="span">I love Internet!</span> </body> </html>测试结果:
Firefox |
Chrome31.0.1650.63
|
Chrome39.0.2160.2
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
body init
|
body init
|
window onload
|
|
|
body init
|
代码2:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test21</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> function init(){ console.log("body init"); } $(function(){ console.log("dom ready="+$('#span').html()); }) </script> </head> <body οnlοad="init()"> <span id="span">I love Internet!</span> <script>window.οnlοad=function(){ console.log("window onload"); }</script> </body> </html>测试结果:
Firefox
| Chrome31.0.1650.63 | Chrome39.0.2160.2 |
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
window onload
|
window onload
|
window onload
|
代码3:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test3</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> /*window.οnlοad=function(){ console.log("window onload"); }*/ $(window).load(function(){ console.log("window onload!"); }) function init(){ console.log("body init"); } $(function(){ console.log("dom ready="+$('#span').html()); }) </script> </head> <body οnlοad="init()"> <span id="span">I love Internet!</span> </body> </html>测试结果:
Firefox
|
Chrome31.0.1650.63
| Chrome39.0.2160.2 |
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
window onload! |
window onload!
|
window onload!
|
body init
|
body init
|
body init
|
代码4:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test4</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> /*window.οnlοad=function(){ console.log("window onload"); }*/ function init(){ //setTimeout(function(){ console.log("body init"); // },1000); } $(function(){ console.log("dom ready="+$('#span').html()); $(window).load(function(){ console.log("window onload!"); }) /*window.οnlοad=function(){ console.log("window onload"); }*/ }) </script> </head> <body οnlοad="init()"> <span id="span">I love Internet!</span> </body> </html>测试结果:
Firefox
|
Chrome31.0.1650.63
| Chrome39.0.2160.2 |
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
body init |
body init
| body init |
window onload!
|
window onload!
| window onload! |
代码5:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test5</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> /*window.οnlοad=function(){ console.log("window onload"); }*/ function init(){ //setTimeout(function(){ console.log("body init"); // },1000); } $(function(){ console.log("dom ready="+$('#span').html()); /*$(window).load(function(){ console.log("window onload!"); })*/ window.οnlοad=function(){ console.log("window onload"); } }) </script> </head> <body οnlοad="init()"> <span id="span">I love Internet!</span> </body> </html>测试结果:
Firefox
| Chrome31.0.1650.63 | Chrome39.0.2160.2 |
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
window onload |
window onload
| window onload |
代码6:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test5</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> /*window.οnlοad=function(){ console.log("window onload"); }*/ function init(){ //setTimeout(function(){ console.log("body init"); // },1000); } $(function(){ console.log("dom ready="+$('#span').html()); $(window).load(function(){ console.log("jquery window onload!"); }) window.οnlοad=function(){ console.log("window onload"); } }) </script> </head> <body οnlοad="init()"> <span id="span">I love Internet!</span> </body> </html>测试结果:
Firefox
| Chrome31.0.1650.63 | Chrome39.0.2160.2 |
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
window onload |
jquery window onload!
| jquery window onload! |
jquery window onload!
|
window onload
|
window onload
|
代码7:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Test7</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> /*window.οnlοad=function(){ console.log("window onload"); }*/ function init(){ //setTimeout(function(){ console.log("body init"); // },1000); } $(function(){ console.log("dom ready="+$('#span').html()); window.οnlοad=function(){ console.log("window onload"); } $(window).load(function(){ console.log("jquery window onload!"); }) }) </script> </head> <body οnlοad="init()"> <span id="span">I love Internet!</span> </body> </html>测试结果:
Firefox
| Chrome31.0.1650.63 | Chrome39.0.2160.2 |
dom ready=I love Internet!
|
dom ready=I love Internet!
|
dom ready=I love Internet!
|
window onload |
window onload
| window onload |
jquery window onload!
|
jquery window onload!
| jquery window onload! |