js加载顺序疑惑：window.load、document.body.load和$(function(){}) - zeromike - ITeye技术网站
博客分类：
今天在看脚本加载的顺序，想探讨一下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的时候执行的。
也有可能我理解不正确，请批评指正。
在这三款浏览器中发现有些不同的现象。
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&Test2&/title&
&script src="/jquery-1.9.1.min.js"&&/script&
window.onload=function(){
console.log("window onload");
function init(){
console.log("body init");
$(function(){
console.log("dom ready="+$('#span').html());
&body onload="init()"&
&span id="span"&I love Internet!&/span&
测试结果：
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
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&Test21&/title&
&script src="/jquery-1.9.1.min.js"&&/script&
function init(){
console.log("body init");
$(function(){
console.log("dom ready="+$('#span').html());
&body onload="init()"&
&span id="span"&I love Internet!&/span&
&script&window.onload=function(){
console.log("window onload");
}&/script&
测试结果：
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
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&Test3&/title&
&script src="/jquery-1.9.1.min.js"&&/script&
/*window.onload=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());
&body onload="init()"&
&span id="span"&I love Internet!&/span&
测试结果：
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!
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&Test4&/title&
&script src="/jquery-1.9.1.min.js"&&/script&
/*window.onload=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.onload=function(){
console.log("window onload");
&body onload="init()"&
&span id="span"&I love Internet!&/span&
测试结果：
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!
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&Test5&/title&
&script src="/jquery-1.9.1.min.js"&&/script&
/*window.onload=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.onload=function(){
console.log("window onload");
&body onload="init()"&
&span id="span"&I love Internet!&/span&
测试结果：
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
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&Test5&/title&
&script src="/jquery-1.9.1.min.js"&&/script&
/*window.onload=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.onload=function(){
console.log("window onload");
&body onload="init()"&
&span id="span"&I love Internet!&/span&
测试结果：
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
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&Test7&/title&
&script src="/jquery-1.9.1.min.js"&&/script&
/*window.onload=function(){
console.log("window onload");
function init(){
//setTimeout(function(){
console.log("body init");
// },1000);
$(function(){
console.log("dom ready="+$('#span').html());
window.onload=function(){
console.log("window onload");
$(window).load(function(){
console.log("jquery window onload!");
&body onload="init()"&
&span id="span"&I love Internet!&/span&
测试结果：
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!
浏览 12343
zhangzhaoaaa
浏览: 665520 次
来自: 北京
2楼理解很透呀，我用程序测了，是正确的。
另外一个方法实现eclipse tomcat 热部署：http ...
this.mockMvc = webAppContextSet ...window.onload()的加载问题 - 博客频道 - CSDN.NET
分类：JavaScript
&&& &script type=&application/javascript&&
&&&&&&& window.onload = function(){
&&&&&&&&&&& var obj = document.getElementById(&btn&);
&&&&&&&&&&& function f(){
&&&&&&&&&&&&&&& alert(&show me&);
&&&&&&&&&&& }
&&& &/script&
&&& &button id=&btn& onclick=&f()&&click&/button&
&当函数f()放在window.onload()=function(){}内部的时候，点击按钮并不能够调用f()成功弹出对话框。并且控制台显示
&&& Uncaught ReferenceError:f is not defined
&&&& 也就是函数f()就没有被定义。
&&&& 但是如果将function f()移到window.onload()=function(){}外部，也就是如下的时候，程序就能正常运行。
&&script type=&application/javascript&&
&&&&&&& window.onload = function(){
&&&&&&&&&&& var obj = document.getElementById(&btn&);
&&&&&&& function f(){
&&&&&&&&&&& alert(&show me&);
&&& &/script&
分析一下：
&&&&& 首先，window.onload事件是在整个页面包括dom结构、图片等等全部加载完成之后才会触发。
其次，HTML加载时由上往下的，在HTML加载的时候，遇到function关键字，声明一个函数的时候，就会在内存中开辟一个新的空间来对函数进行存储，方便以后进行调用。
所以，当将function f()写到window.onload()=function(){}内部的时候，需要整个页面加载完成的之后，才声明这个函数，也就意味着，当HTML加载到onclick=&f()&的时候，window.onload=function(){}里面的函数f还没有被声明，这时候内存中就找不到function f()，于是就会报错。
那么，将function f()移到window.onload()=function(){}外，则HTML加载到&head&&/head&的时候就会声明函数f了，所以进行onclick绑定的时候就能够在内存中找到f()并进行调用。
&&&&&& 除了这是涉及HTML加载顺序的问题，还有一点就是可以从函数作用域这方面去考虑。写在window.onload()=function(){}内部的function f()就是在一个匿名函数内部的局部函数，并不是全局函数，所以onclick=&f()&调用的时候是调用不到的。
但是如果你在第一段代码中，function f()函数后面加上obj.onclick =那程序就又能正常运行了。这是因为直接将函数f绑定给obj对象点击事件上了，所以就不在window.onload()=function(){}的作用域下，就可以成功调用该函数了！
提到window.onload事件，补充说明一下它与jquery中的$(document).ready()的区别：
$(document).ready()是在DOM结构绘制完毕之后就执行内部的语句了，不用像window.onload一样，需要等到全部元素都加载完毕才执行。
排名：千里之外扫二维码下载作业帮
1.75亿学生的选择
下载作业帮安装包
扫二维码下载作业帮
1.75亿学生的选择
function a ()在js里这是定义（声明）函数afunction a(b)在js里b是参数，它有什么作用，它都起着那些作用window.onload=function ()在这段js代码中，function ：起着什么作用window.onload=function () ：这句是什么意思function a(b)
：b是参数，这个参数都起着那些参数。在哪些情况下，能用到参数
扫二维码下载作业帮
1.75亿学生的选择
function a(b)代表定义了一个a函数，并且定义了一个形参 b 在调用a函数时，需要给一个参数 例如: a(2) 或 a('aaa')方便在a函数中获取参数进行处理window.onload=function ()function 是函数的意思 同时js是弱类型语言，有时我们需要用对象时，也可以这样使用比如function Person(){}var p = new Person();希望可以帮到你
为您推荐：
扫描下载二维码